JavaScript嵌套函数作为方法时this.gear自增出现NaN问题咨询

嘿，这个问题其实戳中了JavaScript里两个关键知识点：this的绑定规则和变量作用域查找，我来给你拆解清楚！

核心原因：this的指向和变量查找的区别 #

当你直接写gear += 1时，JavaScript会按照作用域链往上查找gear变量——如果当前函数作用域里没有定义gear，就会一直找到全局作用域。如果全局作用域里刚好有gear变量（比如你在代码开头声明了let gear = 0），那自然能正常累加。

但this.gear += 1就不一样了：它是在访问当前this上下文对象的gear属性。如果this的指向不是你预期的对象（比如指向了全局对象window，甚至是undefined），而这个对象里没有gear属性，那this.gear的值就是undefined。undefined + 1的结果就是NaN，这就是你遇到的问题！

举个常见的场景例子 #

假设你的代码是这样的：

// 全局变量gear
let gear = 0;

function shiftGear() {
  // 第8行
  gear += 1; // 正常工作：找到全局的gear，累加后变成1
  // this.gear += 1; // 返回NaN：这里this指向全局对象window，window.gear未定义（let声明的全局变量不会挂到window上），所以undefined +1 = NaN
}

shiftGear();

或者另一种场景：你定义了一个对象，但调用方法时this指向错了：

const bike = {
  gear: 0,
  shift: function() {
    this.gear += 1; // 这里的this指向取决于怎么调用这个函数
  }
};

// 正确调用：this指向bike，正常累加
bike.shift();
console.log(bike.gear); // 输出1

// 错误调用：把方法单独拿出来调用，this指向全局window
const wrongCall = bike.shift;
wrongCall(); // this.gear是undefined，累加后变成NaN

怎么解决？ #

要让this.gear +=1正常工作，关键是确保this指向你期望的对象：

• 直接通过对象调用方法：比如bike.shift()，此时this绑定到bike对象。
• 用箭头函数：箭头函数的this会继承外层作用域的this，不会被调用方式改变：

  const bike = {
    gear: 0,
    shift: () => {
      this.gear += 1; // 这里的this和bike所在的外层作用域this一致
    }
  };
  

• 手动绑定this：用bind()方法给函数绑定固定的this：

  const bike = {
    gear: 0,
    shift: function() {
      this.gear += 1;
    }.bind(this) // 绑定到bike对象
  };
  

内容的提问来源于stack exchange，提问作者Rick Thompson