揭秘call、apply、bind的幕后黑手：揭示自定义作用域的奥秘

2024-01-09 21:34:37

在 JavaScript 中，call、apply、bind 是 Function 原型上的三个神奇方法，它们可以改变调用函数的作用域或上下文。通过使用它们，你可以轻松地把一个函数绑定到另一个对象，并指定函数被调用时的作用域。在本文中，我们将深入探索这三个方法的内部机制，揭示它们是如何工作的以及如何使用它们来解决实际问题。

call 和 apply

call 和 apply 方法非常相似，它们都允许你指定函数被调用时的作用域。第一个参数是要被调用的函数，之后的参数是传给函数的参数。

call 方法的语法如下：

func.call(context, arg1, arg2, ...);

apply 方法的语法如下：

func.apply(context, [args]);

唯一的区别是 apply 方法接受一个数组作为第二个参数，而 call 方法接受单独的参数。

例如，我们有以下代码：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // Hello, Alice!

如果我们想让 greet 函数在另一个对象的作用域中被调用，我们可以使用 call 或 apply 方法。例如，我们可以使用以下代码将 greet 函数绑定到 person 对象：

const person = {
  name: "Bob"
};

greet.call(person, "Alice"); // Hello, Alice!

在这个例子中，person 对象被用作 greet 函数的调用上下文，因此 "Bob" 被输出到控制台。

bind

bind 方法与 call 和 apply 类似，但它不会立即调用函数。相反，它返回一个新的函数，该函数被绑定到指定的上下文。这意味着你可以预先设置函数的上下文，然后在以后使用它来调用函数。

bind 方法的语法如下：

func.bind(context, arg1, arg2, ...);

例如，我们可以使用以下代码将 greet 函数绑定到 person 对象：

const person = {
  name: "Bob"
};

const boundGreet = greet.bind(person, "Alice");

boundGreet(); // Hello, Alice!

在这个例子中，boundGreet 是一个新的函数，它被绑定到 person 对象。当我们调用 boundGreet 函数时，"Bob" 被输出到控制台。

比较

call、apply 和 bind 这三个方法都有自己的优点和缺点。

call 和 apply 允许你立即调用函数，但你必须手动传递参数。
bind 允许你预先设置函数的上下文，但你必须手动调用函数。
bind 返回一个新的函数，因此你可以轻松地将它存储在变量中或传递给其他函数。

自定义作用域

call、apply 和 bind 这三个方法都可以用来自定义函数的作用域。这可以非常有用，例如，当你想创建一个私有方法时。

要创建一个私有方法，你可以使用以下步骤：

将函数声明为一个对象的方法。
使用 call 或 apply 方法将函数绑定到对象。
将函数的名称从对象中删除。

例如，我们可以使用以下代码创建一个私有方法：

const person = {
  name: "Bob",
  greet: function(name) {
    console.log(`Hello, ${name}!`);
  }
};

const boundGreet = person.greet.bind(person);

delete person.greet;

boundGreet("Alice"); // Hello, Alice!