javascript深刻淺出——原型&原型鏈

javascript深刻淺出——原型&原型鏈

原型（原型是js中實現繼承的過程當中產生的一個概念）

繼承：指在一個對象的基礎上建立新對象的過程，原型指在這過程當中做爲基礎的對象。

1.建立對象

var o  = {
  f:function(){
    return this.a+this.b;
  }
}
var p = Object.create(o);
p.a=1;
p.b=2;
console.log(p.f());//3
複製代碼

經過Object.create()方法咱們傳入了o對象,做爲p對象的原型來建立p對象，而後p對象中就產生了一個叫_proto_的指針，這指針指向o對象。經過這個指針p對象就能夠訪問到o對象的f方法。

###2.prototype對象

function dog(name){
    this.name=name;
    return this.name;
}
var dogA = new dog('dogA');
console.log(dogA);//dog{name:'dogA'}
複製代碼

使用new對象會生成一個dog對象的實例,缺點：沒法共享屬性和方法.好比說：

function dog(name){
    this.name=name;
    this.species='犬科';
    return this;
}
var dogA = new dog('AA');
var dogB = new dog('BB');
dogA.species = '貓科';
console.log(dogA);//dog {name: "AA", species: "貓科"}
console.log(dogB);//dog {name: "BB", species: "犬科"}
複製代碼

改變了dogA的species，不會影響dogB中的species.每個實例對象，都有本身的屬性和方法的副本。這不只沒法作到數據共享，也是極大的資源浪費。

3.prototype屬性

這個屬性包含一個對象，全部實例對象須要共享的屬性和方法，都放在這個對象裏面；哪些不須要共享的屬性和方法， 就放在構造函數裏面。實例一旦建立，將自動引入prototype對象的屬性和方法，也就是說，實例對象的屬性和方法，分爲兩種，一種是本地的，另外一種是引用的。

function dog(name){
    this.name=name;
    return this;
}
dog.prototype = {species:'犬科'};
var dogA = new dog('AA');
var dogB = new dog('BB');
console.log(dogA.species);//犬科
console.log(dogB.species);//犬科
複製代碼

如今，species屬性是放在prototype對象中，是兩個實例對象共享的。只要修改了prototype，就會同時影響到兩個實例對象。

dog.prototype.species = '貓科';       
console.log(dogA.species);//貓科
console.log(dogB.species);//貓科
複製代碼

4.原型鏈

講原型一個不可避免的概念就是原型鏈，原型鏈是經過前面兩種建立原型Object.create()或dog.prototype的方式生成的一個_prtoto_指針來實現的。

function foo(){
    foo.prototype.z=3;
}
var obj = new foo();
obj.x = 1;
obj.y = 2;
console.log(obj);//foo {x: 1, y: 2}
console.log(obj.z);//3
複製代碼

對象obj上是沒有z的，可是他的原型鏈上有z,因此查找的時候若是對象自己不存在的話就會沿着原型鏈往上查找

obj.z=5;
console.log(obj.z);//5
console.log(foo.prototype.z);//3
複製代碼

若是對象上有的話則不會向原型鏈上查找，並且並不會改變原型鏈上的值

總結一下原型鏈做用：對象屬性的訪問修改和刪除。

• 訪問。優先在對象自己查找，沒有則順着原型鏈向上查找
• 修改。只能修改跟刪除自身屬性，不會影響到原型鏈上的其餘對象。

總結 ：因爲全部的實例對象共享同一個 prototype 對象，那麼從外界看起來，prototype 對象就好像是實例對象的原型，而實例對象則好像」繼承」了 prototype 對象同樣