this & call & apply：JavaScript函数中的灵活性

2023-10-12 10:24:27

this是什么？

在JavaScript中，this指向当前正在执行的函数的作用域。它可以是对象、函数或全局对象。如果函数不是作为对象的方法被调用，则this指向全局对象。

例如：

function myFunction() {
  console.log(this);
}

myFunction(); // 输出：Window

在上面的例子中，myFunction()函数不是作为对象的方法被调用，因此this指向全局对象Window。

call和apply

call和apply是两个内置的函数，它们可以改变函数的执行上下文。它们都可以接收两个参数：第一个参数是要改变执行上下文的函数，第二个参数是要作为this绑定的对象。

call和apply的区别在于，call的第二个参数是函数参数的列表，而apply的第二个参数是函数参数的数组。

例如：

function myFunction(a, b) {
  console.log(this);
  console.log(a);
  console.log(b);
}

var obj = {
  name: "John Doe"
};

myFunction.call(obj, 1, 2); // 输出：{ name: "John Doe" }, 1, 2
myFunction.apply(obj, [1, 2]); // 输出：{ name: "John Doe" }, 1, 2

在上面的例子中，myFunction()函数被调用两次，一次使用call，一次使用apply。两次调用的输出都是一样的，因为call和apply都将obj对象作为this绑定到了myFunction()函数上。

自己如何实现call的功能

我们可以自己实现call的功能，代码如下：

Function.prototype.myCall = function(obj, ...args) {
  obj.fn = this;
  obj.fn(...args);
  delete obj.fn;
};

function myFunction(a, b) {
  console.log(this);
  console.log(a);
  console.log(b);
}

var obj = {
  name: "John Doe"
};

myFunction.myCall(obj, 1, 2); // 输出：{ name: "John Doe" }, 1, 2