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

Answer 7

这个问的难道不是箭头函数写法的区别么？
const o = {
method() {

return "Hello!";

}
};

// 等同于

const o = {
method: function() {

return "Hello!";

}
};

箭头函数this指向不同，有箭头函数指向的是window，没有箭头函数指向当前对象

Answer 8

我也有个疑问，看图