1. 程式人生 > >JS原型鏈的一些理解

JS原型鏈的一些理解

關於原型鏈我的理解是一個建構函式的原型作為另一個建構函式的例項形成的繼承關係
在JS高階程式設計中有這樣一個圖
圖片來源於JS高階程式設計
當我們定義一個函式時會有一個原型,即圖中的SuperType Prototype,這時原型物件中會有一個constructor指向建構函式SuperType,這便是建構函式與原型物件之間的關係;

function Super(){
  this.name='bob';
  this.age=20;
}

此時如果再定義一個SubType建構函式,把SubType prototype作為建構函式SuperType的例項,便會有[[Prototype]]指向SuperType Prototype這樣便形成了原型鏈,注意SubType Prototype已經沒有constructor

function Super(){
  this.name='bob';
  this.age=20;
}

function Person(){};
Person.prototype = new Super();

原型鏈中的繼承
上面程式碼中Person建構函式和prototype裡什麼也沒定義,但是我們現在對Person進行例項,事實上我們是可以取到值的

var person = new Person();
console.log(person.name); //'bob'
console.log(person.age); //20

通過chrome控制檯的列印我們可以發現這種繼承關係,__prototo__:Super

Person.prototype = new Super(); 存在Super中的屬性;
image.png
constructor指向變化
JS高階程式設計說如果一個建構函式的原型物件作為另一個建構函式的例項,那麼作為例項的原型物件的constructor就會消失,從上圖中我們也能發現綠色框中沒有constructor屬性,這裡當時我在想如果直接手動將constructor指為Person這個建構函式原型鏈是否會斷裂

function Super(){
  this.name='bob';
  this.age=20;
}

function Person(){};
Person.prototype = new
Super(); Person.prototype.constructor = Person; console.log(Person.prototype); var person=new Person(); console.log(person);

通過在控制檯中列印可以發現constructor這裡只作為一個屬性,值為Person這個建構函式,而真正的影響指向的constructor為灰色
image.png
因此可以推斷不存在手動更改constructor指向這麼一說