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

更多的教程覺塵風也會繼續為大家更新！夥伴們有不清楚的地方，可以留言

留言回覆：前端，即可領取全套前端視頻學習教程！