this指向：从小白到精通，轻松掌握JavaScript中this的奥秘

前端

2023-12-20 12:23:22

JavaScript中的this指向是一个复杂且经常被误解的概念。它可以是指不同的对象，具体取决于函数的调用方式。

了解this指向非常重要，因为它可以帮助你避免错误并编写更健壮的代码。

在本指南中，我们将讨论JavaScript中this指向的五个主要类型：

new绑定
显式绑定
隐式绑定
默认绑定
绑定丢失

new绑定

当使用new调用函数时，this指向新创建的对象。

例如：

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

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

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

在本例中，当我们使用new关键字调用Person函数时，this指向新创建的person对象。因此，我们可以使用this关键字来访问和设置person对象的属性。

显式绑定

显式绑定允许你将this指向绑定到特定的对象。

你可以使用call()、apply()或bind()方法来实现显式绑定。

例如：

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

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

const printName = function() {
  console.log(this.name);
};

printName.call(person); // John Doe

在本例中，我们使用call()方法将printName函数的this指向绑定到person对象。因此，当我们调用printName函数时，this指向person对象，我们可以使用this关键字来访问和设置person对象的属性。

隐式绑定

隐式绑定是指当函数被作为对象的方法调用时，this指向该对象。

例如：

const person = {
  name: 'John Doe',
  printName: function() {
    console.log(this.name);
  }
};

person.printName(); // John Doe

在本例中，当我们调用printName方法时，this指向person对象。因此，我们可以使用this关键字来访问和设置person对象的属性。

默认绑定

默认绑定是指当函数作为独立函数调用时，this指向全局对象。

例如：

function printName() {
  console.log(this.name);
}

printName(); // undefined

在本例中，当我们调用printName函数时，this指向全局对象。因此，this.name的值是undefined。

绑定丢失

绑定丢失是指当函数被从其定义的对象中剥离出来后，this指向全局对象。

例如：

const person = {
  name: 'John Doe',
  printName: function() {
    console.log(this.name);
  }
};

const printNameFunction = person.printName;

printNameFunction(); // undefined

在本例中，当我们把printName方法从person对象中剥离出来并将其赋给printNameFunction变量后，this指向全局对象。因此，当我们调用printNameFunction函数时，this.name的值是undefined。

硬绑定

硬绑定是指使用bind()方法将this指向永久绑定到特定的对象。

例如：

const person = {
  name: 'John Doe',
  printName: function() {
    console.log(this.name);
  }
};

const printNameFunction = person.printName.bind(person);

printNameFunction(); // John Doe