理解JS中的this绑定规则，避免常见的错误

前言

当谈到JavaScript中的this关键字时，很多开发者会感到困惑。this的指向在不同的情况下可能会有不同的表现，这给编程带来了一定的复杂性。因此，理解this的工作原理是成为一个熟练的JavaScript开发者所必须的一部分。本文将介绍this的基本概念、不同的绑定规则，以及如何在实际开发中正确地使用this关键字。

什么是this？

在JavaScript中，this是一个关键字，它代表当前函数的执行上下文。换句话说，this指的是当前正在执行的代码所属的对象。然而，this的值在不同情况下会有所不同，这就是为什么它经常会引起混淆的原因。

this的绑定规则

1. 默认绑定规则

当函数被独立调用时，不带任何修饰符，this会默认绑定到全局对象（在浏览器中通常是window）。这种情况下，我们称之为默认绑定规则。

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

var name = "小梅";
sayName(); // 输出"小梅"

sayName函数在被独立调用时，this会默认绑定到全局对象上，因此输出结果为全局变量name的值"小梅"。

有意思的是，默认绑定规则可能会导致一些意外的结果，特别是在使用严格模式时，this会绑定到undefined而不是全局对象。因此，在实际开发中，需要根据具体情况来确定是否应该使用默认绑定规则。

2. 隐式绑定规则

当函数作为对象的方法被调用时，this会隐式地绑定到这个对象。

var person = {
  name: "小红",
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // 输出"小红"

当调用person对象的sayName方法时，函数中的this被隐式地绑定到person对象上，因此输出结果为person对象中的name属性值"小红"。

隐式绑定规则只在调用对象的方法时才会生效，在其他情况下可能会出现丢失绑定的情况。这就是隐式丢失问题，需要注意避免。

3. 隐式丢失

隐式丢失是指在使用隐式绑定规则时，函数失去了原本的上下文而导致this指向错误的情况。这通常发生在将一个使用this的方法赋值给一个变量，然后在其他地方调用该变量时。

var person = {
  name: "大壮",
  sayName: function() {
    console.log(this.name);
  }
};

var say = person.sayName;
say(); // 输出undefined

sayName方法在赋值给say变量后，它的上下文（也就是person对象）就丢失了，因此在调用say时会导致this指向全局对象（在浏览器中通常是window），导致输出为undefined。

为了避免隐式丢失，可以使用bind方法来显式地绑定上下文：

var say = person.sayName.bind(person);
say(); // 输出"大壮"

通过bind方法，我们将sayName方法与person对象进行了绑定，确保了在调用say时this指向正确的对象。

这样，在实际开发中，需要注意隐式丢失的情况，以避免出现意外的结果。

4. 显式绑定规则

通过call、apply或bind方法，我们可以显式地指定函数内部的this指向哪个对象。

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

var person1 = {name: "卡拉米"};
var person2 = {name: "佛伯乐"};

sayName.call(person1); // 输出"卡拉米"
sayName.apply(person2); // 输出"佛伯乐"

var sayNameForPerson2 = sayName.bind(person2);
sayNameForPerson2(); // 输出"佛伯乐"

call方法 ：call 方法的作用是在特定的对象上调用一个方法，以及为 call 方法传递参数列表。通过sayName.call(person1)，明确指定了在 sayName 函数执行时，其中的 this 应该指向 person1 对象，从而实现了对 person1 对象的属性访问。

apply方法 ：apply 方法与 call 方法类似，不同之处在于传入参数的方式。apply 接收两个参数，第一个参数是要绑定的 this 值，第二个参数是一个数组或类数组对象，包含了要传递给函数的参数列表。sayName.apply(person2) 通过 apply 方法也实现了将 sayName 函数内部的 this 指向了 person2 对象。

bind方法 ：bind 方法用于创建一个新的函数，称为绑定函数，当调用这个绑定函数时，会以创建它时传入的第一个参数作为 this 值。var sayNameForPerson2 = sayName.bind(person2); 创建了一个新的函数 sayNameForPerson2，当调用 sayNameForPerson2 时，其中的 this 将永久指向 person2 对象。

显式绑定规则提供了一种灵活的方式来控制函数内部的 this 指向，使得我们能够在不同的上下文中调用同一个函数并且保持 this 的指向正确。这对于编写复杂的 JavaScript 应用程序非常有用。

5. new 绑定规则

当使用new关键字来调用构造函数时，this会绑定到新创建的对象上。

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

var john = new Person("大漂亮");
console.log(john.name); // 输出"大漂亮"

，当使用new Person("大漂亮")来调用构造函数Person时，this会绑定到新创建的对象上。构造函数中的this.name = name;语句将新对象的name属性设置为传入的参数值"大漂亮"。最后，通过console.log(john.name)输出新对象的name属性值"大漂亮"。这展示了在使用new关键字调用构造函数时，this会正确地绑定到新创建的对象上。

箭头函数对this的影响

ES6引入了箭头函数，它与普通函数有所不同，箭头函数没有自己的this值，而是继承外层作用域的this值。

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // this指向Person对象
    console.log(this.age);
  }, 1000);
}

var person = new Person();

在setInterval函数内部，我们使用箭头函数()=>{}作为回调函数。箭头函数没有自己的this值，而是继承外层作用域的this值。在这种情况下，外层作用域是Person构造函数，因此箭头函数继承了Person构造函数的this值，即指向Person对象本身。

所以每秒钟，箭头函数内部的this.age++会使Person对象的age属性增加1，并通过console.log输出。

通过使用箭头函数，我们可以避免普通函数中this指向不明的问题，确保它绑定到我们想要的对象上，这在一些场景下非常有用

总结

理解this的工作原理对于编写高质量的JavaScript代码至关重要。通过掌握this的绑定规则，我们可以更好地处理函数内部的上下文，并避免出现意外的错误。同时，对于箭头函数的特殊行为也需要我们特别留意，以确保在使用时不会产生意料之外的结果。希望本文能够帮助你更好地理解JavaScript中this关键字的神奇之处。