前言

new關(guān)鍵字在實(shí)例化獲取對(duì)象時(shí)都做了什么？是一道經(jīng)常出現(xiàn)在前端面試時(shí)的問(wèn)題。如果只是簡(jiǎn)單的了解new關(guān)鍵字是實(shí)例化構(gòu)造函數(shù)獲取對(duì)象，是萬(wàn)萬(wàn)不能夠的。更深入的層級(jí)發(fā)生了什么呢？同時(shí)面試官想從這道題里面考察什么呢？下面胡哥為各位小伙伴一一來(lái)解密。

一、new關(guān)鍵字

new關(guān)鍵字的作用：通過(guò)new關(guān)鍵字實(shí)例化構(gòu)造函數(shù)，獲取對(duì)象。說(shuō)一千道一萬(wàn)，不如來(lái)段代碼看一看

// 定義構(gòu)造函數(shù)
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}`)
    }
}

// 構(gòu)造函數(shù)的原型屬性和方法定義
Person.prototype.color = 'yellow'
Person.prototype.sayBye = function () {
    console.log('Bye!')
}

// 實(shí)例化
let p = new Person('胡小帥', 18)
console.log(p)

// 當(dāng)前屬性
console.log(p.name)
// 當(dāng)前方法
p.say()
console.log(p.color)
// 原型方法
p.sayBye()

二、偽代碼演示過(guò)程

通過(guò)new關(guān)鍵字實(shí)例化的對(duì)象p，具備了構(gòu)造函數(shù)Person中this的屬性：name、age，也具備了構(gòu)造函數(shù)Person的原型prototype的屬性color和方法sayBye。下面我們來(lái)通過(guò)偽代碼來(lái)看看具體的實(shí)現(xiàn)過(guò)程。

1. 初始化新對(duì)象

   var o = {}
   

2. 原型的執(zhí)行，確定對(duì)象o的原型鏈

   o.__proto__ = Person.prototype
   

3. 綁定this對(duì)象為o，傳入?yún)?shù)；執(zhí)行Person構(gòu)造函數(shù)，進(jìn)行屬性和方法的賦值操作

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

4. 返回結(jié)果

   注意：在通過(guò)該種方式獲取對(duì)象時(shí)，最終不一定返回的是對(duì)象o，要看構(gòu)造函數(shù)的返回值是什么。

   如果函數(shù)返回的是基本類(lèi)型值，實(shí)際會(huì)生成一個(gè)對(duì)象，返回o
   如果是函數(shù)返回的是引用類(lèi)型值，則實(shí)際返回的是該引用類(lèi)型值
   

后記

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

胡哥有話說(shuō)，一個(gè)有技術(shù)，有情懷的胡哥！現(xiàn)任京東前端攻城獅一枚。
胡哥有話說(shuō)，專(zhuān)注于大前端技術(shù)領(lǐng)域，分享前端系統(tǒng)架構(gòu)，框架實(shí)現(xiàn)原理，最新最高效的技術(shù)實(shí)踐！

長(zhǎng)按掃碼關(guān)注，更帥更漂亮呦！關(guān)注胡哥有話說(shuō)公眾號(hào)，可與胡哥繼續(xù)深入交流呦！

胡哥有話說(shuō)