前端经典面试题解密:JS的new关键字都干了什么?
前言
new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的。更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密。
一、new关键字
new关键字的作用:通过new关键字实例化构造函数,获取对象。说一千道一万,不如来段代码看一看
// 定义构造函数 function Person (name, age) { this.name = name this.age = age this.say = function () { console.log(`my name is ${this.name}, my age is ${this.age}`) } } // 构造函数的原型属性和方法定义 Person.prototype.color = ‘yellow‘ Person.prototype.sayBye = function () { console.log(‘Bye!‘) } // 实例化 let p = new Person(‘胡小帅‘, 18) console.log(p) // 当前属性 console.log(p.name) // 当前方法 p.say() console.log(p.color) // 原型方法 p.sayBye()
二、伪代码演示过程
通过new关键字实例化的对象p
,具备了构造函数Person
中this的属性:name
、age
,也具备了构造函数Person
的原型prototype
的属性color
和方法sayBye
。下面我们来通过伪代码来看看具体的实现过程。
初始化新对象
var o = {}
原型的执行,确定对象o的原型链
o.__proto__ = Person.prototype
绑定this对象为o,传入参数;执行Person构造函数,进行属性和方法的赋值操作
Person.call(o, ‘胡小帅‘, 18)
返回结果
注意:在通过该种方式获取对象时,最终不一定返回的是对象o,要看构造函数的返回值是什么。
如果函数返回的是基本类型值,实际会生成一个对象,返回o 如果是函数返回的是引用类型值,则实际返回的是该引用类型值
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏
、转发
、点击右下角按钮在看
,推荐给更多小伙伴呦,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
相关推荐
VitaLemon 2020-08-23
嵌入式移动开发 2020-08-17
Web前端成长之路 2020-07-07
wbczyh 2020-07-05
iconhot 2020-06-26
tangjikede 2020-06-21
Wmeng0 2020-06-14
82244951 2020-05-31
Cricket 2020-05-31
czsay 2020-05-25
FCLAMP 2020-05-19
dageda 2020-04-21
火焰雪人 2020-05-09
yundashicom 2020-05-09
junzi 2020-04-22
xuguiyi00 2020-04-11
zhaowj00 2020-04-08
付春杰Blog 2020-03-26
leap 2020-03-03