前端經典面試題解密：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。下面我們來通過僞代碼來看看具體的實現過程。

1. 初始化新對象

   var o = {}
   

2. 原型的執行，確定對象o的原型鏈

   o.__proto__ = Person.prototype
   

3. 綁定this對象爲o，傳入參數；執行Person構造函數，進行屬性和方法的賦值操作

   Person.call(o, '胡小帥', 18)
   

4. 返回結果

   注意：在通過該種方式獲取對象時，最終不一定返回的是對象o，要看構造函數的返回值是什麼。

   如果函數返回的是基本類型值，實際會生成一個對象，返回o
   如果是函數返回的是引用類型值，則實際返回的是該引用類型值
   

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。
胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深入交流呦！