前端經典面試題解密：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
   若是是函數返回的是引用類型值，則實際返回的是該引用類型值
   複製代碼

後記

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

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

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