前言
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 如果是函式回傳的是參考型別值，則實際回傳的是該參考型別值
后記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚，
胡哥有話說，專注于大前端技術領域，分享前端系統架構，框架實作原理，最新最高效的技術實踐！
長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公眾號，可與胡哥繼續深入交流呦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/131642.html
標籤：JavaScript
上一篇：深入解讀ES6系列（一）
下一篇：vue proxy 跨域代理