要會而且要真懂:new 關鍵字+建構函式中的原型鏈是什麼?
2022-01-07由 Web前端號 發表于 畜牧業
建構函式可以是虛擬函式嗎
上一節我們介紹了建構函式的一些基本概念,本節由淺入深介紹一個非常重要的概念——原型鏈。
先複習下基本知識:
function Fun(){
this。name = “火箭隊”;
console。log();
}
//以上宣告一個函式
typeof Fun; //function
//呼叫函式
Fun();
//將函式執行結果賦給變數res,如果函式沒有返回值就是undefined
var res = Fun();
console。log(typeof res);
//new關鍵字+建構函式,建立一個物件,並賦給變數res2
var res2 = new Fun();
下面來看看res2到底事啥?
res2();
如果仍然是一個函式,執行看看,結果報錯,提示res2不是一個函式。直接求一下型別:
console。log(typeof res2);//object
console。log(res2 instanceof Fun); //true
console。log(res2 instanceof Object); //true
以上說明透過new+關鍵字是用一個函式建立了一個物件,res2的型別為Fun,為Object而不是另一個函式。打印出來看看,這個物件裡有啥
console。log(res2);
從列印結果也可以看出,res2的Fun的一個例項(物件),裡面有一個name屬性和值。除了name屬性,我們還發現了一個顏色略淺的屬性__proto__,值是一個Object物件,然後你點開這個物件,除了剛剛的函式 Fun(),這個物件也有一個__proto__屬性,值也是Object,這個過程似乎可以重複進行,直到最終的物件為null,這個由__proto__屬性連線起來的鏈條就是原型鏈。
原型鏈顯示了JS構造物件的方式,也就是一個物件的屬性不僅僅是自己新新增的屬性,還包括從其“祖先”繼承下來的屬性,比如,當在一個物件中找不到一個屬性的時候,就會沿著原型鏈從其父輩中的屬性一直找下去,一直找到源頭null,這就是JS重用屬性的方式,實現oop語言類和繼承的目的。