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

Posted 2022-11-25

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

下面看一个例子：

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