重学 JS | 箭头函数为什么不能用做构造函数？

绝地灬酷狼 2022-10-09 15:28 182阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![afe0c5ace2f643576604ee604f76b2af.png][]

标题是某大佬入职鹅厂的面试题，这里借题聊聊箭头函数。

前几天学习的时候，我写过关于`this`指向的问题，得出的结论是：`this`永远指向函数的调用者。但是在箭头函数中，`this`指向的是定义时所在的对象，而不是使用时所在的对象。换句话说，**箭头函数没有自己的this，而是继承父作用域中的this**。

看个例子:

var person = {
      name:'张三',
      age:18,
      getName:function(){
         console.log('我的名字是：'+this.name)
      },
      getAge:()=>{
         console.log('我的年龄是：'+this.age)
      }
    }
    
    person.getName() // 我的名字是张三
    person.getAge()  // 我的年龄是undefined
    复制代码

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

`getAge()`通过箭头函数定义，而箭头函数是没有自己的`this`，会继承父作用域的`this`，因此`person.getAge()`执行时，此时的作用域指向`window`，而`window`没有定义`age`属性，所有报`undefined`。

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

**先解答下标题问题，为啥箭头函数不能作为构造函数？**

// 构造函数生成实例的过程
    function Person(name,age){
      this.name = name
      this.age = age
    }
    var p = new Person('张三',18)
    
    //new关键字生成实例过程如下
    // 1. 创建空对象p
    var p = {} 
    // 2. 将空对象p的原型链指向构造器Person的原型
    p.__proto__ = Person.prototype
    // 3. 将Person()函数中的this指向p
    // 若此处Person为箭头函数，而没有自己的this，call()函数无法改变箭头函数的指向，也就无法指向p。
    Person.call(p) 
    复制代码

构造函数是通过new关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this。创建对象过程，`new` 首先会创建一个空对象，并将这个空对象的`__proto__`指向构造函数的`prototype`，从而继承原型上的方法，但是箭头函数没有`prototype`。因此不能使用箭头作为构造函数，也就不能通过new操作符来调用箭头函数。

下面看看箭头函数其他需要注意的点：

1.  不支持call()/apply()函数特性

call()/apply()函数的作用是改变被调用函数中`this`的指向。但是箭头函数没有自己的`this`，而是继承父作用域中的`this`，所以这两函数没法改变箭头函数的指向。

var Person = {
      name:'张三',
      getName:function(arg){
        let fun = v=>v+this.name
        let boy  = {
          name:'李四'
        }
        // call函数绑定boy实例
        return fun.call(boy,arg)
      }
    }
    
    Person.getName('我是') // 我是张三
    复制代码

例子中，倘若箭头函数执行`fun.call(b,arg)`成功改变this的指向，此时应当输出的是：“我是李四”，但实际上输出的是：“我是张三”，由此可以`call`函数并没有成功改变箭头函数`fun`内部`this`的指向。

1.      不绑定arguments

var fun = ()=>{
       console.log(arguments)
    }
    
    fun(1) // 报错：ReferenceError: arguments is not defined
    
    // 解决办法
    var fun = (...args)=>{
      console.log(args)
    }
    fun(1)  // 输出：[1]
    复制代码

1.      没有prototype属性

var fun = ()=>{}
    fun.prototype // undefined
    复制代码

1.      原型函数不能定义成箭头函数

function Person(name){
      this.name = name
    }
    
    // 原型函数使用箭头函数，其中的this指向全局对象，而不会指向构造函数
    // 因此访问不到构造函数本身，也就访问不到实例属性
    Person.prototype.say = ()=>{console.log(this.name)}
    复制代码

自此我们学习了箭头函数的一些疑难点。

关于本文

# 来源：梁龙先森 #

https://juejin.cn/post/6973181948327903245

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持