物件進階原型和原型鏈之基礎認知

看了很多關於原型和原型鏈的講解,基本都是用程式碼解釋,但是對於新手來說,我覺得直接用白話文來解釋或許更加的合適。
原型鏈:proto 這個我們在平時列印時可以經常能夠看到 那麼這個東西具體代表的是什麼呢?

• 原型鏈就是繼承關係(繼承就是父類有的,子類也有),如果說a的原型鏈是什麼,那麼就是它的父類,原型鏈上的方法,就是它的父類的方法。
• 原型:原型就是某一個物件,下面有很多繼承於它的物件，對這些物件來說,這個父類物件就是他們的原型。
• 對於最頂級物件(沒有繼承其他的)的原型鏈,其__proto__(原型鏈)的值是null,別的物件的__proto__都是取繼承物件的方法

上面的白話文說的應該很清楚了,但是為了更加清晰,我使用程式碼加註釋的方法來展示

class Box{
constructor(){

}
play(){

}
run(){

}
}
var b=new Box();
b.abc=function(){

}
console.log(b);      //Box{abc:f}  abc是例項化b的方法 所以列印的時候直接顯示出來,而點開__prpto__查詢原型鏈的方法,會發現play和run方法,說明原型鏈就是繼承
console.log(b.__proto__);   //Box{}   例項化的原型就是Box(類)
//在類中,只有類似play()這種方法,才是例項化後原型鏈上的方法,其餘的屬性都是物件屬性,不屬於原型鏈上的方法
 

物件的建立

物件的建立有三種方式:字面量建立,建構函式建立,原型建立物件

//字面量建立   var obj={a:1,b:2}
//建構函式建立   var obj=new Object()   
//原型建立物件
var o={a:1};
var o1=Object.create(o);  //以o為原型建立o1,o2 
var o2=Object.create(o);
o.a=10;
o1.a=100;
console.log(o1.a,o2.a.o1);  //100   10   
//o中的a本來是物件屬性,不是原型鏈下的,但是以o為原型建立後,對於子類來說a的所有屬性都是原型鏈下的屬性,
//子類改變屬性值，不會影響原型鏈上的屬性值，但是原型鏈上的屬性改變後,子類也會跟著改變

//可以通過子類改變原型鏈上的屬性
o1.__proto__.a=100;     //其他繼承這個原型的物件，也會跟著改變,所以一般不允許直接修改原型鏈的屬性,除非你自認為能夠駕馭的了
 

• 當設定物件屬性時，直接設定的是物件的自身屬性（物件屬性）;如果自身屬性和原型屬性名字衝突了,原型上的屬性沒影響,只是設定了自身的同樣屬性,而且原型上的屬性不再影響這個物件
• 如果獲取時，
  1.首先檢視該物件有沒有這個名稱的物件屬性，如果有直接返回這個屬性值
  2.如果沒有向下查詢緊鄰的原型鏈中的屬性是否具有該屬性名
  3.查詢到距離該物件最近的原型鏈中屬性名後返回其值