解放你的this：深入浅出了解apply、call和bind

2023-10-28 15:47:29

在JavaScript的世界中，this是一个常被提及却又容易被误解的概念。它可以指代不同的对象，具体取决于它所在的上下文。在大多数情况下，this指向正在执行代码的对象。然而，在某些情况下，this的指向可能会发生变化，例如使用箭头函数或call()、apply()和bind()等方法。

深入理解`this`的应用场景

在JavaScript中，this有四种常见的应用场景：

作为对象的方法： 当一个函数作为对象的属性被调用时，this指向该对象。例如：

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

person.greet(); // 输出: Hello, my name is John Doe.

作为构造函数： 当一个函数被用作构造函数时，this指向正在创建的新对象。例如：

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

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

作为事件处理程序： 当一个函数被用作事件处理程序时，this指向触发该事件的元素。例如：

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // 输出: <button>元素
});

作为全局对象： 在严格模式下，当一个函数不在任何对象或函数的上下文中被调用时，this指向全局对象。例如：

'use strict';

function globalFunction() {
  console.log(this); // 输出: window对象
}

globalFunction();

巧用`apply()`、`call()`和`bind()`

在JavaScript中，apply()、call()和bind()这三个方法可以帮助我们改变this的指向。

apply()方法： apply()方法接受两个参数：第一个参数是要设置this指向的对象，第二个参数是数组形式的参数列表。例如：

const person = {
  name: 'John Doe',
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}.`);
}

greet.apply(person, ['Hello']); // 输出: Hello, my name is John Doe.

call()方法： call()方法与apply()方法类似，但第二个参数不是数组形式的参数列表，而是用逗号分隔的参数列表。例如：

const person = {
  name: 'John Doe',
};

function greet(greeting, name) {
  console.log(`${greeting}, my name is ${name}.`);
}

greet.call(person, 'Hello', 'John Doe'); // 输出: Hello, my name is John Doe.

bind()方法： bind()方法与apply()和call()方法不同，它不立即调用函数，而是返回一个新的函数，该函数的this指向被固定为指定的this值。例如：

const person = {
  name: 'John Doe',
};

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

const boundGreet = greet.bind(person);
boundGreet(); // 输出: Hello, my name is John Doe.