对象方法中,不适用箭头函数

下面看一个例子:

const obj = {
name: '张三',
getName() {
return this.name
},
getName1: () => {
return this.name
}
}

我们在对象中定义了普通函数:getName和箭头函数 getName1,接下来我们来调用一下:

console.log('普通函数',obj.getName())
console.log('箭头函数',obj.getName1())

这里我们看看输出什么:

//普通函数, 张三
//普通函数

为什么对象方法中,箭头函数的this指向不是这个对象

  1. this 永远指向函数的调用者
  2. 在箭头函数中,this 指向的是定义时所在的对象,而不是使用时所在的对象。换句话说,箭头函数没有自己的 this,而是继承父作用域中的 this。

​obj.getName()​​​中​​this​​​指向函数的调用者,也就是​​obj​​​实例,因此​​this.name = "张三"​​。

​getName1()​​通过箭头函数定义,而箭头函数是没有自己的​​this​​,会继承父作用域的​​this​​。

因此​​obj.getName1()​​执行时,此时的作用域指向​​window​​,而​​window​​没有定义​​name​​属性,所有报空。

从例子可以得出:对象中定义的函数使用箭头函数是不合适的


原型方法中,不适用箭头函数

const obj = {
name: '张三',
}
obj.__proto__.getName = function() {
return this.name
}
obj.__proto__.getName1 = () => {
return this.name
}

我们又又又在对象中定义了普通函数:getName和箭头函数 getName1,接下来我们来调用一下:

console.log(obj.getName())
console.log(obj.getName1())

这里想想输出什么

张三

原因同对象方法一样。


构造函数也不行!

function Foo (name, sex) {
this.name = name
this.sex = sex
}
const Foo1 = (name, sex) => {
this.name = name
this.sex = sex
}
console.log('普通的构造函数:', new Foo('张三', '男'))
console.log('箭头函数:', new Foo1('张三', '男'))

最后发现箭头函数new出来的构造函数报错。

这是因为构造函数是通过 new 关键字来生成对象实例,生成对象实例的过程也是通过构造函数给实例绑定 this 的过程,而箭头函数没有自己的 this。因此不能使用箭头作为构造函数,也就不能通过 new 操作符来调用箭头函数。