如何改变函数内部 this 的指向？请说明 call、apply 和 bind 方法的区别和用法。

推荐答案

改变函数内部 this 指向的方法主要有 call、apply 和 bind 这三种。它们的核心作用都是允许我们手动指定函数执行时的 this 值，从而实现更加灵活的代码控制。

• call 方法：
  • 语法：function.call(thisArg, arg1, arg2, ...)
  • 作用：立即执行函数，并将 this 指向 thisArg，后续的参数 arg1, arg2, ... 作为函数的参数传入。
• apply 方法：
  • 语法：function.apply(thisArg, [argsArray])
  • 作用：立即执行函数，并将 this 指向 thisArg，argsArray 是一个数组，其中的元素作为函数的参数传入。
• bind 方法：
  • 语法：function.bind(thisArg, arg1, arg2, ...)
  • 作用：创建一个新的函数，该函数的 this 被永久绑定到 thisArg。 bind 方法返回的函数不会立即执行，需要手动调用。后续的参数 arg1, arg2, ... 会预先添加到新函数的参数列表中。

区别：

1. 执行时机: call 和 apply 会立即执行函数，而 bind 返回一个新函数，需要后续调用。
2. 参数传递方式: call 接受参数列表，apply 接受参数数组。bind 除了可以指定 this， 也可以预先传入一部分参数。
3. 返回结果： call 和 apply 返回的是函数的执行结果，bind 返回的是一个新的函数。

本题详细解读

call 的使用

call 方法允许我们为一个函数指定 this 值，并传递参数。以下是一个例子：

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Alice" };

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

在这个例子中，greet 函数内部的 this 指向了 person 对象。 "Hello" 和 "!" 作为参数传递给了 greet 函数。

apply 的使用

apply 和 call 的主要区别在于传递参数的方式。apply 使用数组来传递参数。

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Bob" };
const args = ["Hi", "."];

greet.apply(person, args); // 输出：Hi, Bob.

args 数组中的元素 "Hi" 和 "." 分别被作为 greet 函数的第一个和第二个参数传递。

bind 的使用

bind 方法会返回一个新的函数，该函数的 this 已经被永久绑定到指定的值。即使后续再次调用新函数，this 的指向也不会改变。

// www.javascriptcn.com code example
function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Charlie" };
const boundGreet = greet.bind(person, "Greetings");

boundGreet("?");  // 输出：Greetings, Charlie?
boundGreet("!"); // 输出：Greetings, Charlie!

boundGreet 函数的 this 已经被永久绑定到 person 对象，并且预先传递了 "Greetings" 作为第一个参数。

总结

• call 和 apply 都是立即执行函数并改变 this 指向，区别在于传参方式。
• bind 返回一个新的函数，并且永久绑定 this 指向，需要后续调用。
• 选择使用哪个方法取决于你的需求。如果需要立即执行函数并传入参数，使用call或apply，如果需要创建一个新的函数并且固定this指向，使用bind。