前言 new關鍵字在實例化獲取對象時都做了什麼？是一道經常出現在前端面試時的問題。如果只是簡單的瞭解new關鍵字是實例化構造函數獲取對象，是萬萬不能夠的。更深入的層級發生了什麼呢？同時面試官想從這道題裡面考察什麼呢？下麵胡哥為各位小伙伴一一來解密。 一、new關鍵字 new關鍵字的作用：通過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。下麵我們來通過偽代碼來看看具體的實現過程。
-
初始化新對象
var o = {} -
原型的執行，確定對象o的原型鏈
o.__proto__ = Person.prototype -
綁定this對象為o，傳入參數；執行Person構造函數，進行屬性和方法的賦值操作
Person.call(o, '胡小帥', 18) -
返回結果
註意：在通過該種方式獲取對象時，最終不一定返回的是對象o，要看構造函數的返回值是什麼。
如果函數返回的是基本類型值，實際會生成一個對象，返回o 如果是函數返回的是引用類型值，則實際返回的是該引用類型值
後記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。
胡哥有話說，專註於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
長按掃碼關註，更帥更漂亮呦！關註胡哥有話說公眾號，可與胡哥繼續深入交流呦！
