JavaScript this是什么，如何灵活使用this？

2023-09-11 10:00:52

this是JavaScript中一个非常重要的，它指向当前执行代码的对象。this的指向会根据代码执行的上下文而改变，这可能会让人感到困惑，但只要理解了this的绑定机制，就可以轻松掌握它的用法。

this的绑定机制

this的绑定机制主要有四种：隐式绑定、显式绑定、new绑定和bind()方法。

隐式绑定

隐式绑定是最常见的一种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.

在这个例子中，greet()方法被调用时，this隐式绑定到了person对象，因此可以在方法内部访问person对象的name属性。

显式绑定

显式绑定允许我们手动指定this的指向。可以使用call()、apply()和bind()方法来实现显式绑定。

call()方法和apply()方法都可以传入一个对象作为第一个参数，然后将this绑定到该对象。这两个方法的区别在于，call()方法传入参数的顺序与函数的形参顺序相同，而apply()方法传入参数的顺序与函数的形参顺序不同。例如：

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

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

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

bind()方法与call()方法和apply()方法不同，它不会立即调用函数，而是返回一个新的函数，这个新的函数的this值被绑定到了传入的第一个参数。例如：

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

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

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

new绑定

new绑定是指在使用new关键字创建对象时，this会被绑定到新创建的对象。例如：

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

const person = new Person('John Doe');

console.log(person.name); // John Doe

在这个例子中，new Person('John Doe')创建了一个新的Person对象，并将this绑定到了这个对象，因此可以在构造函数内部访问this.name属性。

如何灵活使用this

理解了this的绑定机制之后，就可以灵活地使用this来实现各种目的。以下是一些使用this的技巧：

使用箭头函数来保持this的指向不变。箭头函数没有自己的this，它会继承外层函数的this。例如：

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

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

在这个例子中，greet()方法是一个箭头函数，它继承了person对象的this，因此可以在方法内部访问person对象的name属性。

使用显式绑定来改变this的指向。显式绑定允许我们手动指定this的指向，这在某些情况下非常有用。例如：

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

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

const button = document.getElementById('button');

button.addEventListener('click', greet.bind(person));