剖析JavaScript中call、apply、bind：洞悉函数的作用域控制

2023-11-19 02:51:35

JavaScript函数中的this

在JavaScript中，每个函数都有一个this属性，它指向函数执行时的当前对象。this的指向可以通过call、apply、bind三个方法进行控制。

call方法

call方法可以指定函数内部this的指向，然后在所指定的作用域中，调用该函数。

function person(name) {
  this.name = name;
}

var person1 = new person('张三');
person1.name; // "张三"

var person2 = {};
person(call)(person2, '李四');
person2.name; // "李四"

在这个例子中，person函数被调用两次。第一次，this指向person1对象，因此person1.name的值为"张三"。第二次，call方法被用来将this指向person2对象，因此person2.name的值为"李四"。

apply方法

apply方法与call方法类似，但它接受一个数组作为第二个参数，该数组包含要传递给函数的参数。

function person(name) {
  this.name = name;
}

var person1 = new person('张三');
person1.name; // "张三"

var person2 = {};
person.apply(person2, ['李四']);
person2.name; // "李四"

在这个例子中，apply方法被用来将this指向person2对象，并且传递了一个数组['李四']作为第二个参数。因此，person2.name的值为"李四"。

bind方法

bind方法返回一个新的函数，该函数的this指向被固定为bind方法调用的对象。

function person(name) {
  this.name = name;
}

var person1 = new person('张三');
person1.name; // "张三"

var person2 = {};
var boundPerson = person.bind(person2);
boundPerson('李四');
person2.name; // "李四"