JS 装饰器模式以及 call/apply 用法

在 JavaScript 中，装饰器模式是一种非常有用的设计模式，它允许我们在不改变对象自身的基础上，为对象添加新的功能。这种模式在很多场景下都非常实用，比如当我们需要给函数添加日志记录、性能监控、事务处理等额外功能时。

装饰器模式简介

装饰器模式涉及到三个角色：目标对象、装饰器和客户端。目标对象是我们想要添加新功能的对象，装饰器是包含了新功能的对象，客户端是使用装饰后对象的用户。

在 JavaScript 中，我们通常使用函数来实现装饰器模式，因为函数是一等公民，可以作为参数传递，也可以作为返回值。

function loggingDecorator(wrappedFunction) {
  return function (...args) {
    console.log(`调用函数，参数为：${args}`);
    return wrappedFunction.apply(this, args);
  };
}

function originalFunction(x, y) {
  return x + y;
}

const decoratedFunction = loggingDecorator(originalFunction);
console.log(decoratedFunction(5, 10));

在上面的例子中，loggingDecorator就是一个装饰器，它接收一个函数wrappedFunction作为参数，并返回一个新的函数。这个新函数在调用原始函数之前，会先打印出调用的参数。

call和apply的使用

在 JavaScript 中，call和apply都是函数对象的方法，它们可以用来改变函数调用时的this指向，并且传递参数给函数。

在装饰器中，我们经常需要将调用转发给原始的函数。这时候，call 和 apply 方法就派上用场了。这两个方法都可以在特定的 this 上下文中调用一个函数，区别在于传递参数的方式不同。

call方法接收一个this值和若干个指定的参数值：

function greet() {
  const reply = [this.animal, "typically sleep", this.sleepDuration].join(" ");
  console.log(reply);
}

const obj = {
  animal: "猫",
  sleepDuration: "12和16小时之间",
};

greet.call(obj);

输出结果：

猫 typically sleep 12和16小时之间

apply方法与call方法类似，不同之处在于apply接收的是一个参数数组：

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);

console.log(max); // 输出: 7

结语

装饰器模式和call/apply方法在 JavaScript 中是非常强大的工具。它们可以帮助我们编写出更加灵活和可复用的代码。希望这篇文章能够帮助你更好地理解和使用这些概念。