当前位置:Gxlcms > JavaScript > JavaScript惰性载入函数实例分析

JavaScript惰性载入函数实例分析

时间:2021-07-01 10:21:17 帮助过:4人阅读

本文实例讲述了JavaScript惰性载入函数。分享给大家供大家参考,具体如下:

惰性载入函数

惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二种实现惰性载入的方式是在声明函数时就制定适当的函数,这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点儿性能。

载入方式一

  1. var flag = 1;
  2. function test1() {
  3. if(typeof flag === 'undefined') {
  4. test1 = function() {
  5. return 0;
  6. }
  7. } else if(flag === 1) {
  8. test1 = function() {
  9. return 1;
  10. }
  11. } else {
  12. test1 = function () {
  13. return -1;
  14. }
  15. }
  16. return test1();
  17. }

这里if语句的每个分支都会为test1变量赋值,有效覆盖了原有的函数,最后一步便是调用新赋的函数,下一次调用test1()的时候就会直接调用被分配的函数,就不会再走if语句了,这样就可以提高性能。

载入方式二

  1. var flag = 1;
  2. var test2 = (function() {
  3. if(typeof flag === 'undefined') {
  4. return function() {
  5. return 0;
  6. }
  7. } else if(flag === 1) {
  8. return function () {
  9. return 1;
  10. }
  11. } else {
  12. return function () {
  13. return -1;
  14. }
  15. }
  16. })();

不同点是使用了立即执行函数,通过var来定义函数,在每个if分支中return一个函数

总结

这两种方式都能避免执行不必要的代码。方式一中第一次调用会损失性能,方式二重首次加载时会损失性能

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

人气教程排行