对象上三种函数写法区别

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

Add a Comment

电子邮件地址不会被公开。