JavaScript 从浅入深 100 题训练计划--(16)惰性函数

题目：什么是惰性函数？实现一个惰性加载的 addEvent 函数

 

惰性函数（Lazy Function）：

  • 定义：函数第一次执行时，根据其环境重写自身

  • 目的：避免每次执行都进行条件判断

  • 场景：浏览器兼容性处理、环境检测

 1 // 普通写法：每次调用都要判断
 2 function addEvent(element, type, handler) {
 3   if (element.addEventListener) {
 4     element.addEventListener(type, handler, false);
 5   } else if (element.attachEvent) {
 6     element.attachEvent('on' + type, handler);
 7   } else {
 8     element['on' + type] = handler;
 9   }
10 }
11 
12 // 惰性函数写法：第一次执行后重写自身
13 const addEvent = (function() {
14   if (document.addEventListener) {
15     return function(element, type, handler) {
16       element.addEventListener(type, handler, false);
17     };
18   } else if (document.attachEvent) {
19     return function(element, type, handler) {
20       element.attachEvent('on' + type, handler);
21     };
22   } else {
23     return function(element, type, handler) {
24       element['on' + type] = handler;
25     };
26   }
27 })();
28 
29 // 另一种写法：在函数内部重写
30 function addEvent(element, type, handler) {
31   if (element.addEventListener) {
32     addEvent = function(element, type, handler) {
33       element.addEventListener(type, handler, false);
34     };
35   } else if (element.attachEvent) {
36     addEvent = function(element, type, handler) {
37       element.attachEvent('on' + type, handler);
38     };
39   } else {
40     addEvent = function(element, type, handler) {
41       element['on' + type] = handler;
42     };
43   }
44   
45   // 第一次调用时执行
46   return addEvent(element, type, handler);
47 }

 

posted @ 2026-08-24 14:29  小新的蜡笔  阅读(3)  评论(0)    收藏  举报