对象上三种函数写法区别

ES6没出现之前对象上写方法的形式只有一种①：

let person = {
  name:'zhangsan',
  sayName:function(){
    console.log(this.name)
  }
}

ES6出来后增加了一种箭头函数②：

let person = {
  name:'zhangsan',
  sayName:()=>{
    console.log(this.name)
  }
}

同时又增加了对象的简写形式③：

let person = {
  name:'zhangsan',
  sayName(){
    console.log(this.name)
  }
}

那以上三种的区别与联系是什么呢？

答：第三种是第一种的简写，调用 person.sayName() 得到的结果是一样的，this指向调用对象 person，都是打印：zhangsan。第二种是箭头函数，调用 person.sayName() 时 this 指向声明函数时外部的 this（这里就是window）由于 window 没有 name 属性，所以返回 undefined。

实践：https://jsbin.com/zenoxuh/edit?js