#yyds干货盘点#那些地方不能使用箭头函数

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

下面看一个例子：

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 操作符来调用箭头函数。