ES6对象中箭头函数this指向问题：循环内正确调用对象方法

嘿，你遇到的问题根源其实是箭头函数的this绑定特性在搞鬼！箭头函数不会创建自己的执行上下文，它会直接捕获定义时所在环境的this——在你的代码里，fullname用箭头函数定义时，上下文的this是全局对象（浏览器环境下是window），所以不管你用call还是直接调用，this都不会指向person对象，自然拿不到fname和lname的值。

下面给你几种可行的解决方案：

1. 把箭头函数改成普通函数（推荐） #

普通函数的this由调用方式决定，当它作为对象的方法被调用时，this会自动指向该对象。修改后的代码如下：

let person = {
  fname: "Joseph",
  lname: "Michuki",
  age: 22,
  profession: "developer",
  address: "10105550-81 Othaya",
  fullname: function() {
    return this.fname + " " + this.lname;
  }
};

for(let i in person){ // 这里要加let声明i，避免全局变量污染
  if(typeof person[i] === 'function'){
    console.log(person[i]()); // 现在会输出"Joseph Michuki"
    // 或者用call明确指定this，结果完全一致
    // console.log(person[i].call(person));
  }else {
    console.log(person[i]);
  }
}

2. 使用ES6方法简写语法 #

这是普通函数的简洁写法，效果和上面一致，代码更清爽：

let person = {
  fname: "Joseph",
  lname: "Michuki",
  age: 22,
  profession: "developer",
  address: "10105550-81 Othaya",
  fullname() {
    return this.fname + " " + this.lname;
  }
};

3. 直接在箭头函数中引用person对象（不推荐） #

如果一定要保留箭头函数，你可以直接在函数里引用person变量，但这样函数和对象强耦合，一旦person变量被重新赋值，函数就会出错：

let person = {
  fname: "Joseph",
  lname: "Michuki",
  age: 22,
  profession: "developer",
  address: "10105550-81 Othaya",
  fullname: () => person.fname + " " + person.lname
};

这种方式虽然能解决当前问题，但灵活性很差，不建议在对象方法中使用。

另外还要提一下你原代码里的两个小细节：

• person.i这里的i是字符串变量，person对象没有名为"i"的属性，所以会触发类型错误，应该用person[i]来访问动态属性；
• 循环里的i没有声明，会变成全局变量，建议加上let或者const声明。

内容的提问来源于stack exchange，提问作者Vincent J. Michuki