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

前言

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

1、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()
复制代码

2、伪代码演示过程

经过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
   若是是函数返回的是引用类型值，则实际返回的是该引用类型值
   复制代码

后记

以上就是胡哥今天给你们分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。 胡哥有话说，专一于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深刻交流呦！