您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

箭头函数为什么不能用做构造函数?

时间:2021-08-12 10:52:45  来源:  作者:simon锋

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

前几天学习的时候,我写过关于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)}


Tags:构造函数   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
标题是某大佬入职鹅厂的面试题,这里借题聊聊箭头函数。前几天学习的时候,我写过关于this指向的问题,得出的结论是:this永远指向函数的调用者。但是在箭头函数中,this指向的是定义...【详细内容】
2021-08-12  Tags: 构造函数  点击:(115)  评论:(0)  加入收藏
C++的构造函数的作用:初始化类对象的数据成员。即类的对象被创建的时候,编译系统对该对象分配内存空间,并自动调用构造函数,完成类成员的初始化。构造函数的特点:以类名作为函数...【详细内容】
2020-08-06  Tags: 构造函数  点击:(180)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条