妙用apply函数巧施偷梁换柱之计，轻松操控this指向

前端

2023-12-20 10:51:42

一、apply方法的实现原理

apply方法的实现原理并不复杂，但它涉及到JavaScript的几个重要概念：

this ：this关键字指向当前函数执行的上下文对象。
函数调用 ：当我们调用一个函数时，会创建一个执行上下文，并将this关键字绑定到该执行上下文。
高阶函数 ：高阶函数是指可以接受函数作为参数或返回值的函数。

apply方法的工作原理是：

将函数作为第一个参数传递给apply方法。
将this值作为第二个参数传递给apply方法。
将剩余参数作为数组形式传递给apply方法。
apply方法会创建一个新的执行上下文，并将this关键字绑定到指定的this值。
apply方法会调用函数，并将剩余参数作为函数的参数传入。

二、myApply方法测试结果

为了更好地理解apply方法的实现原理，我们自己实现一个myApply方法。

Function.prototype.myApply = function(context, args) {
  if (typeof this !== "function") {
    throw new TypeError("Error: Function.prototype.myApply can only be called on functions");
  }
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

const obj = {
  name: '张三',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

obj.sayHello(); // Hello, my name is 张三

const anotherObj = {
  name: '李四'
};

obj.sayHello.myApply(anotherObj, []); // Hello, my name is 李四

运行这段代码，我们可以看到，当我们调用obj.sayHello()时，this关键字指向obj对象，因此输出"Hello, my name is 张三"。当我们调用obj.sayHello.myApply(anotherObj, [])时，this关键字指向anotherObj对象，因此输出"Hello, my name is 李四"。这证明了apply方法可以改变函数的this指向。

三、apply方法的实现步骤

为了更深入地理解apply方法的实现，我们将其分解为以下步骤：