关于JavaScript中this关键字的理解疑问及代码问题咨询

嘿，我来帮你搞清楚这段代码的问题所在～

首先看你写的代码：

let myObject = {
  objectFunc: function() {
    this.thing = 10;
  },
  addFunc: function(x) {
    let result = this.thing + x;
    return result;
  }
}
console.log(myObject.addFunc(20));

你执行这段代码后应该得到的是NaN，对吧？这是因为你虽然定义了objectFunc用来给this.thing赋值，但从来没有调用过这个方法，所以myObject上根本不存在thing属性，this.thing的值是undefined，和数字20相加自然就得到非数字（NaN）了。

这里的this指向是什么？ #

在对象的方法里，this指向的是调用该方法的对象本身。比如你调用myObject.objectFunc()时，this就指向myObject，执行this.thing = 10就会给myObject添加一个名为thing的属性，值为10。

修正后的代码 #

你只需要先调用objectFunc初始化thing属性，再调用addFunc就能得到正确结果：

let myObject = {
  objectFunc: function() {
    this.thing = 10;
  },
  addFunc: function(x) {
    let result = this.thing + x;
    return result;
  }
}

// 先初始化thing属性
myObject.objectFunc();
console.log(myObject.addFunc(20)); // 输出 30

更简洁的写法 #

如果你不需要动态初始化thing，也可以直接在对象定义时就赋值：

let myObject = {
  thing: 10, // 直接初始化属性
  addFunc: function(x) {
    let result = this.thing + x;
    return result;
  }
}

console.log(myObject.addFunc(20)); // 直接输出 30

这样是不是就清楚多啦？核心就是要确保this.thing有有效值的时候再去使用它，而this在这里始终指向myObject这个对象本身。

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