看懂bind、call、apply，深刻认识JavaScript函数的执行上下文

前端

2023-09-09 12:54:32

JavaScript函数的执行上下文，主要包括调用者的执行上下文（当前运行的上下文环境）和被调用者的执行上下文。

bind、call、apply都是改变函数执行上下文的函数，它们都有一个共同点，就是都可以改变函数的执行上下文。

bind返回一个新函数，该函数在被调用时，将使用传递给bind方法的第一个参数作为this值，而不会使用默认的this值。

call和apply的作用类似，都可以改变函数的执行上下文。call方法直接执行函数，apply方法将参数列表作为数组传入函数。

bind、call、apply的区别：

bind方法返回一个新函数，该函数在被调用时，将使用传递给bind方法的第一个参数作为this值，而不会使用默认的this值。
call方法直接执行函数，apply方法将参数列表作为数组传入函数。
bind方法可以被用于事件处理程序，而call和apply方法不能。

接下来，我们通过代码示例来详细演示一下bind、call、apply的用法和区别。

// 定义一个函数
function sayHello() {
  console.log(this.name);
}

// 创建一个对象
const person = {
  name: 'John'
};

// 使用bind方法创建一个新函数
const sayHelloToJohn = sayHello.bind(person);

// 调用sayHelloToJohn函数
sayHelloToJohn(); // "John"

// 使用call方法调用sayHello函数
sayHello.call(person); // "John"

// 使用apply方法调用sayHello函数
sayHello.apply(person); // "John"