JavaScript深入浅出：this、call、apply、bind的奥妙

前端

2023-09-25 11:27:21

JavaScript中的this

在JavaScript中，this指向当前执行代码的对象。在全局上下文中，this指向window对象；在对象方法中，this指向调用该方法的对象；在构造函数中，this指向新创建的对象。

call、apply和bind方法

call、apply和bind都是Function原型链中的方法，可以改变方法调用中的this指向。

call 方法接收两个参数：第一个参数是this指向的对象，第二个参数是参数列表。call方法会立即执行该方法。
apply 方法接收两个参数：第一个参数是this指向的对象，第二个参数是参数数组。apply方法也会立即执行该方法。
bind 方法接收两个参数：第一个参数是this指向的对象，第二个参数是参数列表。bind方法不会立即执行该方法，而是返回一个新的函数，该函数的this指向已被绑定到第一个参数。

使用this、call、apply和bind的示例

为了更好地理解this、call、apply和bind的使用，我们来看一些示例：

// 全局上下文中，this指向window对象
console.log(this); // 输出：Window {...}

// 对象方法中，this指向调用该方法的对象
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出：John Doe
  }
};

person.greet(); // 输出：John Doe

// 构造函数中，this指向新创建的对象
function Person(name) {
  this.name = name;
}

const person1 = new Person('John Doe');
console.log(person1.name); // 输出：John Doe

// 使用call方法改变this指向
const anotherPerson = {
  name: 'Jane Doe'
};

person.greet.call(anotherPerson); // 输出：Jane Doe

// 使用apply方法改变this指向
person.greet.apply(anotherPerson); // 输出：Jane Doe

// 使用bind方法改变this指向
const boundGreet = person.greet.bind(anotherPerson);
boundGreet(); // 输出：Jane Doe