如何将JS对象内部的普通方法正确改写为arrow function（箭头函数）

• 第一个是语法错误：对象字面量的属性赋值需使用冒号:，你写的printIt = () => {}不符合对象语法规范，首先需要把等号替换为冒号。
• 第二个是逻辑错误：即使修复了语法问题，直接在对象字面量中把方法定义为箭头函数也无法正常获取this.name和this.age。箭头函数没有独立的this绑定，它的this会继承定义时外层作用域的this，在对象字面量定义的场景下，外层this指向全局上下文，不会指向当前创建的object实例，所以输出结果会是undefined undefined。

方案1：直接引用对象变量（适合对象字面量场景） #

放弃this引用，直接通过对象变量名访问属性，写法如下：

let object = {
    name : "Aditya",
    age : 20,
    printIt: () => {
        console.log(object.name + " " + object.age)
    }
}

调用object.printIt()可正常输出Aditya 20。

方案2：使用class类字段定义（适合需要复用实例的场景） #

如果需要保留this的写法，可以通过class类的字段语法定义箭头函数方法，此时箭头函数的this会绑定到类实例：

class Person {
    name = "Aditya"
    age = 20
    printIt = () => {
        console.log(this.name + " " + this.age)
    }
}
let object = new Person()

调用object.printIt()可正常输出Aditya 20。

箭头函数的设计初衷是简化回调函数的this绑定问题，天生不适合作为对象方法使用。如果你只是想要简化原有普通函数的写法，更推荐使用ES6对象方法简写语法，既能保持简洁，又能保证this绑定正常：

let object = {
    name : "Aditya",
    age : 20,
    printIt() {
        console.log(this.name + " " + this.age)
    }
}

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