为何JavaScript中对象obj的add方法返回NaN？如何修复？

嘿，这个问题我在社区里碰到好多次啦，调用对象方法返回NaN通常逃不出这几个典型场景，咱们一个个来拆解：

一、this指向跑偏了 #

这是最常见的坑！如果你的add方法里用到了this来访问对象的属性，但调用时this并没有指向obj本身，那访问到的属性就是undefined，undefined + undefined可不就是NaN嘛。

举个错误示例：

const obj = {
  num1: 5,
  num2: 3,
  add: function() {
    return this.num1 + this.num2;
  }
};

// 错误调用：把方法赋值给变量后调用，this指向全局对象（浏览器里是window）
const callAdd = obj.add;
callAdd(); // 返回NaN

修复方案：

• 直接通过对象调用方法：obj.add()，这样this就会正确指向obj；
• 用bind绑定this：const callAdd = obj.add.bind(obj); callAdd();；
• 如果用ES6语法，也可以用箭头函数定义方法（箭头函数的this是定义时的上下文，也就是obj）：

const obj = {
  num1: 5,
  num2: 3,
  add: () => this.num1 + this.num2
};
obj.add(); // 返回8

二、属性/参数未初始化或未传递 #

如果add方法依赖的对象属性没赋值，或者调用时需要传递参数但你没传，那参与运算的就是undefined，结果自然是NaN。

错误示例1（属性未初始化）：

const obj = {
  num1: undefined,
  num2: 3,
  add: function() {
    return this.num1 + this.num2;
  }
};
obj.add(); // 返回NaN

错误示例2（未传参数）：

const obj = {
  add: function(x, y) {
    return x + y;
  }
};
obj.add(); // 返回NaN

修复方案：

• 给对象属性设置默认初始值（比如0）；
• 给方法参数添加默认值：

const obj = {
  add: function(x = 0, y = 0) {
    return x + y;
  }
};
obj.add(); // 返回0

• 调用方法时确保传递正确的参数：obj.add(2, 4);

三、数据类型不匹配（非数字参与运算） #

如果你的属性是字符串（尤其是无法转成有效数字的字符串），或者其他非数字类型，转数字失败后就会得到NaN，相加结果也是NaN。

错误示例：

const obj = {
  num1: "10",
  num2: "hello", // 无法转成有效数字
  add: function() {
    return Number(this.num1) + Number(this.num2);
  }
};
obj.add(); // 返回NaN

修复方案：

• 确保参与运算的属性是数字类型；
• 添加类型校验，处理非数字的情况：

const obj = {
  num1: "10",
  num2: "hello",
  add: function() {
    const a = Number(this.num1);
    const b = Number(this.num2);
    // 校验是否为有效数字，不是的话返回默认值或抛出提示
    if (isNaN(a) || isNaN(b)) {
      console.warn("请传入有效数字");
      return 0;
    }
    return a + b;
  }
};
obj.add(); // 输出警告并返回0

你可以对照自己的代码，看看属于哪一种情况，基本上就能快速解决问题啦！

内容的提问来源于stack exchange，提问作者Heshan Kumarasinghe