call/apply/bind深度解析：揭秘函数执行上下文的奥秘

2024-02-15 07:44:20

函数执行上下文：揭开 call、apply 和 bind 的奥秘

导语

在 JavaScript 的世界中，函数执行上下文扮演着至关重要的角色，影响着代码的执行流程和变量的作用域。掌握 call、apply 和 bind 三个方法将赋予你改变函数执行上下文的神奇力量，从而控制函数内部 this 的指向。这篇文章将深入浅出地带你领略这三个方法的精髓，助你成为 JavaScript 代码的驾驭者。

一、函数执行上下文

当一个函数被召唤，它便会创建一个自己的执行上下文，其中包含了函数执行所需要的所有信息，包括变量对象、作用域链和 this 关键字。

变量对象： 存储着函数内部声明的所有变量和参数，在函数执行结束后被销毁。
作用域链： 由变量对象组成的链条，决定了函数内部可以访问哪些变量。当前函数的变量对象位于链条的顶端，依次向上直到全局对象。
**this ** 指向当前函数的执行上下文对象，可用于访问函数内部的变量和方法。

二、call、apply、bind：改变执行上下文

这三个方法都是 Function.prototype 上的方法，这意味着所有函数都可以调用它们。它们的主要目的都是修改函数的执行上下文，从而达到不同的效果。

1. call 方法

call 方法接受两个参数：第一个参数指定函数被调用的上下文对象，第二个参数是函数的参数列表。当 call 方法被调用时，函数将在指定的上下文中执行，并且 this 关键字将指向第一个参数。

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

function fn(arg1, arg2) {
  console.log(this.name + " says: " + arg1 + ", " + arg2);
}

fn.call(obj, "Hello", "World"); // 输出：John Doe says: Hello, World

2. apply 方法

apply 方法与 call 方法类似，但它接受一个参数数组而不是参数列表。同样地，函数将在指定的上下文中执行，并且 this 关键字将指向第一个参数。

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

function fn(arg1, arg2) {
  console.log(this.name + " says: " + arg1 + ", " + arg2);
}

fn.apply(obj, [1, 2]); // 输出：John Doe says: 1, 2

3. bind 方法

bind 方法与 call 和 apply 方法不同，它不立即执行函数，而是返回一个新的函数。这个新函数的执行上下文被绑定到 bind 方法的第一个参数，并且 this 关键字将指向第一个参数。

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

function fn(arg1, arg2) {
  console.log(this.name + " says: " + arg1 + ", " + arg2);
}

var boundFn = fn.bind(obj);

boundFn("Hello", "World"); // 输出：John Doe says: Hello, World