面试题：JavaScript函数调用多样化场景之绑定上下文

Question

请描述JavaScript中`call`、`apply`和`bind`方法在函数调用时绑定上下文的区别，并分别举例说明如何使用它们改变函数内部`this`的指向。

Answer 1

区别

1. call：
   • 语法：func.call(thisArg, arg1, arg2, ...)。
   • 特点：第一个参数是要绑定给函数内部this的对象，后面可以接收一系列参数，这些参数会依次作为函数的参数传入。
2. apply：
   • 语法：func.apply(thisArg, [arg1, arg2, ...])。
   • 特点：第一个参数同样是要绑定给函数内部this的对象，但第二个参数是一个数组（或类数组对象），数组中的元素会依次作为函数的参数传入。
3. bind：
   • 语法：func.bind(thisArg, arg1, arg2, ...)。
   • 特点：返回一个新的函数，这个新函数内部的this被永久绑定到bind方法的第一个参数，后续调用新函数时传入的参数会追加在bind方法中传入的参数之后。

示例

1. call示例：

function greet() {
    console.log(`Hello, ${this.name}!`);
}
const person = { name: 'John' };
greet.call(person);

2. apply示例：

function sum(a, b) {
    return a + b;
}
const numbers = [3, 5];
const result = sum.apply(null, numbers);
console.log(result); 

3. bind示例：

function sayHello() {
    console.log(`Hello, ${this.name}!`);
}
const user = { name: 'Jane' };
const boundSayHello = sayHello.bind(user);
boundSayHello();