释放函数潜能——装饰器模式和转发调用，揭秘Call/Apply，以及防抖/节流装饰器的妙用

2023-11-13 10:41:30

在 JavaScript 的世界中，函数是构建代码逻辑的基础。通过对函数的理解和灵活运用，我们可以更加高效地编写代码，提高程序的可读性和可维护性。而装饰器模式和转发调用便是 JavaScript 提供的两大强大工具，可以帮助我们更好地发挥函数的潜能。

1. 装饰器模式：锦上添花的函数修饰术

装饰器模式是一种设计模式，它允许我们通过在函数周围包裹其他函数来动态地修改函数的行为。这种方式可以避免直接修改函数的源代码，从而提高代码的可复用性和灵活性。

function log(target, name, descriptor) {
  const oldValue = descriptor.value;

  descriptor.value = function () {
    console.log(`Calling ${name} with args ${arguments}`);
    const result = oldValue.apply(this, arguments);
    console.log(`Called ${name} with result ${result}`);
    return result;
  };

  return descriptor;
}

@log
function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // Output: "Calling sum with args 1, 2", "Called sum with result 3", 3

在这个例子中，我们定义了一个装饰器函数 log，它接受三个参数：target、name 和 descriptor。target 是被装饰的函数的所属对象，name 是被装饰的函数的名称，descriptor 是被装饰的函数的符。

在 log 函数内部，我们重写了被装饰函数的 value 属性，使其在被调用时输出日志。这样，当我们调用 sum 函数时，log 装饰器就会自动执行，在控制台中输出日志，同时执行 sum 函数并返回结果。

2. 转发调用：灵活传递函数上下文

转发调用是 JavaScript 中一种强大的技术，它允许我们动态地修改函数的执行上下文。通过使用 call() 或 apply() 方法，我们可以指定函数的 this 指针，从而在不同的对象上调用函数。

function greet() {
  console.log(`Hello, my name is ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

greet.call(person); // Output: "Hello, my name is John Doe!"

在这个例子中，我们定义了一个函数 greet，它在被调用时会输出一个带有 this.name 的问候语。然后，我们定义了一个对象 person，并使用 call() 方法在 person 对象上调用 greet 函数。这样，当 greet 函数被调用时，它的 this 指针指向 person 对象，因此 this.name 的值是 John Doe。

除了 call() 方法之外，我们还可以使用 apply() 方法来转发调用函数。apply() 方法与 call() 方法类似，但它允许我们传入一个数组作为函数的参数，而 call() 方法则需要逐个传入参数。

greet.apply(person, ['Jane Doe']); // Output: "Hello, my name is Jane Doe!"

在这个例子中，我们使用 apply() 方法在 person 对象上调用 greet 函数，并传入一个数组 ['Jane Doe'] 作为参数。这样，当 greet 函数被调用时，它的 this 指针指向 person 对象，而函数参数则取自数组 ['Jane Doe']。

3. Call/Apply/Bind：活用函数调用技巧

在 JavaScript 中，除了使用装饰器模式和转发调用之外，我们还可以使用 call()、apply() 和 bind() 方法来灵活地调用函数。这些方法都可以指定函数的执行上下文，但它们之间存在一些细微的差异。

方法	参数	执行上下文
`call()`	对象, 参数列表	对象
`apply()`	对象, 参数数组	对象
`bind()`	对象, 参数列表	新函数

call() 方法和 apply() 方法都可以在不同的对象上调用函数，但它们在参数传递方式上有所不同。call() 方法需要逐个传入参数，而 apply() 方法则允许我们传入一个数组作为参数。

bind() 方法与 call() 和 apply() 方法不同，它不立即执行函数，而是返回一个新的函数，该新函数的 this 指针固定为指定的对象。这样，我们可以在以后的任何时间调用这个新函数，而它的 this 指针始终指向指定的对象。

4. 节流与防抖：优化函数执行频率

在 JavaScript 中，有时我们需要限制函数的执行频率，以避免对服务器或其他资源造成过大的负担。我们可以使用节流和防抖技术来实现这一目的。

节流: 节流是一种技术，它可以限制函数在指定的时间间隔内只执行一次。无论函数被调用多少次，它在指定的时间间隔内只会被执行一次。

function throttle(func, delay) {
  let lastCallTime = 0;

  return function () {
    const now = Date.now();

    if (now - lastCallTime >= delay) {
      func.apply(this, arguments);
      lastCallTime = now;
    }
  };
}

const throttledFunction = throttle(function () {
  console.log('Function called!');
}, 1000);

throttledFunction(); // Output: "Function called!"
throttledFunction(); // No output
throttledFunction(); // No output

setTimeout(() => {
  throttledFunction(); // Output: "Function called!"
}, 1500);

在这个例子中，我们定义了一个函数 throttle，它接受两个参数：要节流的函数 func 和节流的延迟时间 delay。

throttle 函数返回一个新的函数，该新函数在被调用时首先检查自上次调用以来是否已经过了指定的时间间隔。如果已经过了指定的时间间隔，则执行 func 函数并更新最后一次调用的时间。如果尚未经过指定的时间间隔，则不执行 func 函数。

防抖: 防抖是一种技术，它可以限制函数在指定的时间间隔内只执行一次。与节流不同的是，防抖只会在指定的时间间隔结束后执行函数，即使函数在指定的时间间隔内被调用多次。

function debounce(func, delay) {
  let timeoutId;

  return function () {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

const debouncedFunction = debounce(function () {
  console.log('Function called!');
}, 1000);

debouncedFunction(); // No output
debouncedFunction(); // No output
debouncedFunction(); // No output

setTimeout(() => {
  debouncedFunction(); // Output: "Function called!"
}, 1500);

在这个例子中，我们定义了一个函数 debounce，它接受两个参数：要防抖的函数 func 和防抖的延迟时间 delay。

debounce 函数返回一个新的函数，该新函数在被调用时首先清除任何先前设置的超时。然后，它设置一个新的超时，并在指定的时间间隔后执行 func 函数。如果在指定的时间间隔内再次调用 debounce 函数，则清除先前的超时并设置一个新的超时。这样，func 函数只会在指定的时间间隔结束后执行一次。