关于javascript中this关键字(翻译+自我理解)

关于JavaScript中this关键字的理解是前端开发中至关重要的一部分，因为它涉及到了JavaScript中的作用域和上下文。以下是关于JavaScript中this关键字的翻译和自我理解的攻略。

什么是this关键字？

在JavaScript中，this是一个特殊的关键字，它表示当前作用域下的对象。但是，它的值在执行上下文中是动态变化的，因此需要特别注意。

this的绑定规则

在JavaScript中，this的值根据调用函数时的上下文环境而变化。以下是this的四种绑定规则。

默认绑定

默认情况下，如果函数没有明确的绑定到其他对象上，它会自动绑定到全局对象上。

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

const person = {
  name: 'John',
  sayName: sayName
}

const name = 'Global Name';

person.sayName(); // 输出 'John'

sayName(); // 输出 'Global Name'

在上面的示例中，sayName函数在调用person.sayName()时，this指向了person对象。而在调用sayName()时，因为没有明确的绑定对象，this指向了全局对象，输出了全局变量name的值。

隐式绑定

当一个函数被调用时，如果它是通过某个对象调用的，this会隐式地绑定到该对象上。

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

person.sayName(); // 输出 'John'

在上面的示例中，sayName函数被对象person调用，在此情况下，函数中的this指向了person对象。

显式绑定

在JavaScript中，我们可以使用call、apply和bind来显示地绑定this的值。

function sayName(age) {
  console.log(this.name, age);
}

const person1 = {
  name: 'John'
}

const person2 = {
  name: 'Alice'
}

sayName.call(person1, 20); // 输出 'John', 20
sayName.apply(person2, [25]); // 输出 'Alice', 25

const sayNameForPerson1 = sayName.bind(person1);
sayNameForPerson1(30); // 输出 'John', 30

在上面的示例中，通过使用call和apply方法，我们将sayName函数的this值绑定到对象person1和person2。而在使用bind方法时，我们创建了一个新的函数sayNameForPerson1，它的this值永久绑定在person1对象上。

new绑定

当一个函数使用new关键字调用时，this会指向创建的新对象。

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

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

在上面的示例中，使用new关键字创建了一个名为person1的新对象，并把this的值绑定到该对象上。

总结

• this关键字表示当前作用域下的对象，但它的值在不同的执行上下文中会动态变化。
• 默认绑定、隐式绑定、显示绑定和new绑定是this值的四种绑定方式。
• 在使用this时，需要特别注意this的值会随着函数的调用方式而变化。

以上是关于JavaScript中this关键字的攻略，希望能够帮助前端开发人员更好地理解和正确地使用this关键字。