JS的new關鍵字都幹了什麼？
阿新 • • 發佈：2020-12-12
前言
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 = {}
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
原型的執行，確定物件o的原型鏈
o.__proto__ = Person.prototype
繫結this物件為o，傳入引數；執行Person建構函式，進行屬性和方法的賦值操作
Person.call(o, '胡小帥', 18)
返回結果
注意：在通過該種方式獲取物件時，最終不一定返回的是物件o，要看建構函式的返回值是什麼。
如果函式返回的是基本型別值，實際會生成一個物件，返回o
如果是函式返回的是引用型別值，則實際返回的是該引用型別值