深入理解 JavaScript 中的 this 指向

目录

一、什么是 this 指向

二、JS 中 this 指向的七种情况及代码示例

（一）全局中的 this 指向

（二）全局作用域或普通函数中的 this 指向

（三）非箭头函数中 this 指向最后调用它的对象

（四）new 关键词改变 this 指向

（五）apply、call、bind 方法改变 this 指向

（六）箭头函数中的 this 指向

（七）匿名函数中的 this 指向

三、总结

---

一、什么是 this 指向

在 JavaScript 中，this是一个非常特殊的关键字。它的指向并不是在定义时确定的，而是在函数被调用时动态确定的。不同的调用方式和上下文环境会导致this指向不同的对象。

二、JS 中 this 指向的七种情况及代码示例

（一）全局中的 this 指向

在全局环境中，this指向的是window对象。

console.log(this); // window

可以通过在函数内部使用bind、call、apply方法来改变全局中的this指向。例如：

function test() {
  console.log(this);
}
const obj = { name: 'Global Modified' };
test.call(obj); // obj 对象

（二）全局作用域或普通函数中的 this 指向

在全局作用域或者普通函数中，如果函数没有被上一级的对象所调用，那么this也指向window。

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

同样可以使用bind、call、apply方法来改变其指向。比如：

const obj2 = { name: 'Function Modified' };
globalFunc.call(obj2); // obj2 对象

（三）非箭头函数中 this 指向最后调用它的对象

在非箭头函数中，this永远指向最后调用它的那个对象。

const obj3 = {
  method: function() {
    console.log(this);
  }
};
obj3.method(); // obj3 对象

若要改变其指向，可以这样操作：

const newObj = { name: 'Modified Object' };
obj3.method.call(newObj); // newObj 对象

（四）new 关键词改变 this 指向

new操作符可以改变this的指向。

function Person(name) {
  this.name = name;
}
const person = new Person('Tom');
console.log(person.name); // Tom

（五）apply、call、bind 方法改变 this 指向

apply、call、bind这三个方法可以显式地指定函数内部this的指向。

function testFunc() {
  console.log(this);
}
const obj4 = { name: 'Applied Object' };
testFunc.call(obj4); // obj4 对象
testFunc.apply(obj4); // obj4 对象
const boundFunc = testFunc.bind(obj4);
boundFunc(); // obj4 对象

（六）箭头函数中的 this 指向

箭头函数中的this在定义的时候就已经确定了。如果箭头函数外层有函数，那么外层函数的this就是箭头函数的this；如果没有外层函数，那么this就是window。

const obj5 = {
  outerFunc: function() {
    const arrowFunc = () => {
      console.log(this);
    };
    arrowFunc();
  }
};
obj5.outerFunc(); // obj5 对象

要改变箭头函数的this指向相对复杂，因为箭头函数的this是在定义时根据外层作用域确定的。通常可以通过在外层函数中使用bind、call、apply方法来间接影响箭头函数的this指向。

（七）匿名函数中的 this 指向

在匿名函数中，this永远指向window。因为匿名函数的执行环境具有全局性。

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

要改变匿名函数中的this指向，可以将匿名函数包裹在一个立即执行的函数表达式中，并通过参数传递所需的this值。例如：

const obj6 = { name: 'Anonymous Modified' };
((that) => {
  console.log(that);
})(obj6); // obj6 对象

三、总结

理解 JavaScript 中this的指向以及如何更改它是掌握这门语言的关键之一。不同的情境下this的指向不同，我们可以根据具体的代码环境选择合适的方法来更改this指向，以实现更加灵活和可维护的代码。