一文搞懂JavaScript中的this绑定规则

一文搞懂JavaScript中的this绑定规则

一、前言

在JavaScript中，this是一个非常重要的概念，它指向的是当前函数的执行环境，它的值取决于函数的调用方式。但是由于this的规则比较复杂，经常会引起开发者的困惑，因此我们有必要详细了解JavaScript中this的工作机制和绑定规则。

二、this的指向

在JavaScript中，this的指向可以分为以下几种情况：

1. 默认绑定：当函数内部使用this时，如果没有通过任何显示的方式指定this的值，那么默认指向全局对象window。

例如：

function foo() {
  console.log(this); // window
}
foo();

在上述代码中，由于foo函数内部没有指定this的值，因此this指向了全局对象window。

1. 隐式绑定：当函数作为对象的方法调用时，this会隐式地绑定到该对象。

例如：

var obj = {
  name: '张三',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // 张三

在上述代码中，由于sayName函数是作为obj的方法调用的，因此this指向了obj对象，所以输出了obj的name属性。

1. 显式绑定：可以使用bind、call、apply等方法显式地指定this的值。

例如：

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

var obj1 = {
  name: '张三'
};
var obj2 = {
  name: '李四'
};

foo.call(obj1); // 张三
foo.call(obj2); // 李四

在上述代码中，由于使用了call方法来调用foo函数，并将this指向obj1或obj2，因此this的值被显式地绑定到了对应的对象。

1. new绑定：创建一个新对象时，构造函数中的this会指向新对象。

例如：

function Person(name) {
  this.name = name;
}
var p = new Person('张三');
console.log(p.name); // 张三

在上述代码中，由于使用new关键字来创建Person对象，因此构造函数中的this指向了新创建的对象p。

三、绑定规则的优先级

在JavaScript中，this的绑定规则是有优先级的，具体来说：

1. new绑定的优先级最高，即使用new关键字创建对象时，this会指向新创建的对象。
2. 显式绑定的优先级次之，即使用bind、call、apply等方法显式地指定this的值。
3. 隐式绑定的优先级第三，即当函数作为对象的方法调用时，this会隐式地绑定到该对象。
4. 默认绑定的优先级最低，即当函数内部使用this时，如果没有通过任何显示的方式指定this的值，那么默认指向全局对象window。

四、常见问题

1. 如何避免this指向全局对象？

在JavaScript中，如果没有通过任何显示的方式指定this的值，那么this会默认指向全局对象window，这通常是一个非常危险的行为，可以通过以下方法来避免：

1. 在严格模式下，全局对象window被禁止使用，所以this不会指向它。
2. 使用ES6中的箭头函数，箭头函数不会创建自己的this，其this指向最近的非箭头函数的this。例如：

var obj = {
  name: '张三',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};
obj.sayName(); // 1秒后输出张三

在上述代码中，使用箭头函数的方式避免了this指向全局对象的问题。

2. 如何强制绑定this指向？

有时候我们需要强制将this指向某个对象，可以使用bind、call、apply等方法来实现，例如：

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

var obj1 = {
  name: '张三'
};
var obj2 = {
  name: '李四'
};

var fn = foo.bind(obj1);
fn(); // 张三

fn.call(obj2); // 张三

在上述代码中，使用bind方法将foo函数的this绑定到obj1对象上，并返回一个新的函数fn，在调用fn函数时，其中this始终指向obj1，即使使用了call方法也无法改变它的指向。

五、总结

本文从JavaScript中this的指向和绑定规则入手，讲述了四种不同的this绑定方式以及其优先级，并详细讨论了常见的this问题，并给出了相应的解决方案。希望能够帮助读者更好地理解和使用JavaScript中的this关键字。