JavaScript 中 this 指向问题分析与解决
在 JavaScript 中，this 是一个关键字，它的指向与函数的调用方式密切相关。许多开发者在写代码时常常遇到 this 指向不明确的问题，导致错误的结果。今天，我们将通过分析一段代码，来详细探讨 this 指向的问题，并提供解决方案
代码分析
var obj = {age: 11,growup: function () {console.log("my age is " + this.age);function growup() {this.age++;console.log("I am growup. I am " + this.age + " years old now!");}growup();}
}
obj.growup();
-
this 在对象方法中的指向
首先，我们来看 obj.growup() 方法的调用。我们调用了 obj 对象的 growup 方法，this 在方法调用时指向该对象 obj this 指向 obj
console.log("my age is " + this.age); // 输出 "my age is 11"// 在这里，this.age 访问的是 obj 对象中的 age 属性，输出为 11 -
this 的指向
- 在 JavaScript 中，this 的指向是动态的，取决于函数是如何被调用的。通常情况下，this 的指向有以下几种规则
- 对象方法调用： 如果函数作为对象的方法调用，this 指向该对象
- 普通函数调用： 如果函数是作为普通函数调用（即不属于任何对象），this 会指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。如果在严格模式下，this 会是 undefined。
在我们的代码中，growup() 函数是作为普通函数调用的，而不是作为方法调用。因此，在执行 growup() 时，this 指向了 全局对象（在浏览器环境中是 window），而不是 obj 对象
- 在 JavaScript 中，this 的指向是动态的，取决于函数是如何被调用的。通常情况下，this 的指向有以下几种规则
-
进入嵌套的 growup 函数
接下来，我们在 growup 方法内定义了一个嵌套函数 growup()。注意，growup() 是一个普通函数，而不是作为对象方法调用的，因此它的 this 指向是一个重要的焦点
function growup() { this.age++; console.log("I am growup. I am " + this.age + " years old now!"); // I am growup. I am NaN years old now!} -
为什么 NaN？
this.age++ 在此时尝试访问 window.age，如果 age 在全局对象上未定义，它会被初始化为 undefined,然后，undefined++ 结果是 NaN，因为 undefined 不能进行加法操作，JavaScript 会将其转为 NaN。
-
growup 函数调用后的最终输出
// my age is 11 // I am growup. I am NaN years old now! -
解决 this 问题
- 使用箭头函数
箭头函数不会创建自己的 this，而是继承外部函数的 this。因此，使用箭头函数可以确保 this 指向 obj 对象，而不是全局对象
如：
var obj = {age: 11,growup: function () {console.log("my age is " + this.age); // 输出 "my age is 11"const growup = () => { // 使用箭头函数this.age++; console.log("I am growup. I am " + this.age + " years old now!");};growup(); // 输出 "I am growup. I am 12 years old now!"}}obj.growup();-
使用 bind() 方法
另一个常见的解决方案是使用 bind() 方法来显式绑定 this 的值。bind() 方法返回一个新的函数，并将 this 指向绑定到指定的对象
如：
var obj = {age: 11,growup: function () {console.log("my age is " + this.age); // 输出 "my age is 11"const growup = () => { // 使用箭头函数this.age++; console.log("I am growup. I am " + this.age + " years old now!");};growup.bind(this)(); // 显式绑定 this} } obj.growup();
- 使用箭头函数
