javascript - es6对象方法简写?

Question

var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

var person = {
    name: "Nicholas",
    sayName:()=> {
        console.log(this.name);
    }
};

这两种写法有什么区别？

Answer 1

两者的差别主要是 this 的差别

第一个 person

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};
person.sayName(); // Nicholas

这里的 person.sayName() 的 this 是指向对象内部的 this 即 person 本身。

---

第二个 person

var person = {
    name: "Nicholas",
    sayName: () => {
        console.log(this.name);
    }
};
person.sayName(); // undefined

这里的 person.sayName() 是箭头函数（），this 指向是当前 this 的调用环境，即是 window

---

Arrow functions

Answer 2

=>
return
箭头函数

Answer 3

this的不一样，箭头函数不会产生新的this

Answer 4

区别在于第一个 this 指向 person，也就是你调用 person.sayName() 时可以得到 Nicholas，第二个实际上可以看作

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

它的 this 实际上指向的是 window 而不是 person，所以取不到对应的 name 值

Answer 5

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。

所以执行第二个person.sayName的时候，根据上面的解释，箭头函数的this值继承自外围作用域，而当前的外围作用于是this，所以会导致这个问题。

Answer 6

第一种会输出Nicholas;
第二种什么也不会输出，除非你给当前的window设置了name，如果是严格模式，则会报错
箭头函数的this指向的是当前运行环境中的this，不是对象本身的this