前端经典面试题解密：JS的new关键字都干了什么？

前言

new关键字在实例化获取对象时都做了什么？是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象，是万万不能够的。更深入的层级发生了什么呢？同时面试官想从这道题里面考察什么呢？下面为各位小伙伴一一来解密。

一、new关键字

new关键字的作用：通过new关键字实例化构造函数，获取对象。说一千道一万，不如来段代码看一看

<code> 
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()
/<code>

二、伪代码演示过程

通过new关键字实例化的对象p，具备了构造函数Person中this的属性：name、age，也具备了构造函数Person的原型prototype的属性color和方法sayBye。下面我们来通过伪代码来看看具体的实现过程。

1. 初始化新对象var o = {}
2. 原型的执行，确定对象o的原型链o.__proto__ = Person.prototype
3. 绑定this对象为o，传入参数；执行Person构造函数，进行属性和方法的赋值操作Person.call(o, '胡小帅', 18)
4. 返回结果注意：在通过该种方式获取对象时，最终不一定返回的是对象o，要看构造函数的返回值是什么。如果函数返回的是基本类型值，实际会生成一个对象，返回o 如果是函数返回的是引用类型值，则实际返回的是该引用类型值

更多的教程觉尘风也会继续为大家更新！伙伴们有不清楚的地方，可以留言

留言回复：前端，即可领取全套前端视频学习教程！