JavaScript 惰性函数

概述

惰性函数通过函数的自我覆盖，实现了延迟执行和性能优化。

用法

性能优化

不使用惰性函数：

不使用惰性函数，每次调用 addEvent 都会进行一次 if-else 判断，造成额外的性能浪费。

function addEvent(element, type, handler) {
  // 每次调用都要判断一次
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + type, handler);
  } else {
    element['on' + type] = handler;
  }
}

for (let i = 0; i < 100; i++) {
  const btn = document.createElement('button');
  btn.textContent = `Button ${i}`;
  document.body.appendChild(btn);
  addEvent(btn, 'click', () => alert(`Button ${i} clicked!`));
}

使用惰性函数：

addEvent 函数在第一次被调用时，会根据浏览器特性，用一个最适合的函数版本把自己 “换掉”。后续所有调用都直接执行那个最优版本。

function addEvent(element, type, handler) {
  // 首次调用：执行检测逻辑，并替换原函数
  if (element.addEventListener) {
    addEvent = function(element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (element.attachEvent) {
    addEvent = function(element, type, handler) {
      element.attachEvent('on' + type, handler);
    };
  } else {
    addEvent = function(element, type, handler) {
      element['on' + type] = handler;
    };
  }

  // 执行新函数
  addEvent(element, type, handler);
}

for (let i = 0; i < 100; i++) {
  const btn = document.createElement('button');
  btn.textContent = `Button ${i}`;
  document.body.appendChild(btn);
  addEvent(btn, 'click', () => alert(`Button ${i} clicked!`));
}

延迟加载

不使用惰性函数：

在代码运行后，对象就会立即被创建，即使不使用也会被创建。

const user = {
    name: "Tom",
    age: 18
}

function getUser() {
    return user;
}

const newUser = getUser()

使用惰性函数：

只有在方法调用时才会创建对象。

let user = null

function getUser() {
    if (user == null) {
        user = {
            name: "Tom",
            age: 18
        }
    }
    return user;
}

const newUser = getUser()