基础13：惰函数

最新推荐文章于 2025-06-02 09:48:36 发布

weikxu

最新推荐文章于 2025-06-02 09:48:36 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_33050575/article/details/126425678

Web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了两种JavaScript中实现惰性载入（lazy loading）的策略，主要用于事件监听函数addEvent()的优化。第一种方式是在函数首次调用时根据浏览器特性动态覆盖函数，避免后续调用的性能损耗。第二种方式是在声明时即根据环境定义函数，牺牲部分初始化性能以换取后续调用的高效。这两种方法都是为了提升代码的运行效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有两种实现惰性载入的方式，第一种事函数在第一次调用时，对函数本身进行二次处理，该函数会被覆盖为符合分支条件的函数，这样对原函数的调用就不用再经过执行的分支了，我们可以用下面的方式使用惰性载入重写addEvent()。

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }   
     return addEvent(type, element, fun);
    }

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样在第一次调用函数时就不会损失性能了，只在代码加载时会损失一点性能。一下就是按照这一思路重写的addEvent()。

var addEvent = (function () {  
    if (document.addEventListener) {  
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }  
   else if (document.attachEvent) {  
          return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }  
      else {        
         return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

惰性函数介绍