天天看點

原型對象是什麼,__proto__跟prototype的差別

 廢話少說,上一個簡單代碼:

function f(){
	this.thisPro='這是我的屬性';
}
f.prototype.protoPro='這是原型對象的屬性';
let ins1=new f();
let ins2=new f();
console.log(ins1.thisPro);//這是我的屬性
ins1.thisPro='這是我ins1的屬性';
console.log(ins1.thisPro);//這是我ins1的屬性
console.log(ins2.thisPro);//這是我的屬性
ins2.thisPro='這是我ins2的屬性';
console.log(ins2.thisPro);//這是我ins2的屬性
console.log(f.prototype.protoPro);//這是原型對象的屬性
ins1.__proto__.protoPro='ins1到此一遊';
console.log(f.prototype.protoPro);//ins1到此一遊
ins2.__proto__.protoPro='ins2到此一遊';
console.log(f.prototype.protoPro);//ins2到此一遊
//到這裡,ins1還沒有自己的protoPro屬性,如果通路這個屬性就會自動到原型對象上面去找。
console.log(ins1.protoPro);//"ins2到此一遊",注意這時候這個屬性依舊是屬于原型對象的
ins1.protoPro="aaaaaaaaa";//跟上面不一樣了,這裡相當于為ins1新建立了一個自身的屬性protoPro,以後再ins1.protoPro就會傳回這個自身屬性的值,要找原型那個protoPro就隻能通過ins1.__proto__或者f.prototype去找。
           

總的來說,這倆都是用來通路原型對象的,原型對象可以通過用來new的那個function即構造函數的prototype去通路,如果把原型對象當作一個類,這樣去通路原型對象的屬性跟方法,就有點像其他語言的static,但是多了一項很厲害的,就是可以通過執行個體的__proto__去通路這個原型對象,而且在執行個體對象找不到某個屬性/方法時,也會自動跑到原型對象上面去找。

打個比方,你玩某個網遊登入了一個帳号,這個帳号不同分區開了多個小号,那麼構造函數就是你自己,你建立了多個執行個體(不同的小号但都是你在玩),每個執行個體自身的屬性不同(不同的分區不同的角色等;這種屬性即構造函數裡面this出來的或者後來用執行個體點出來的),你還指定了原型對象(你那一張銀行卡),你甚至可以在日後重新指定原型對象(換另一張銀行卡)。你的小号在遊戲的時候使用的都是小号裡面的角色資訊(自身屬性),當你開始為小号氪金的時候,小号自己是沒有氪金的功能的,隻有你的銀行卡(原型對象)有氪金的“函數”,是以你的小号氪金相當于銀行卡在氪金。所有小号都用同一張卡去氪金,于是後來啊,你的某個小号女角色跟遊戲裡的老公結婚了,對方為你瘋狂撒币……是以你這個特别的小号有了自己的氪金函數,隻是跟你的銀行卡相比較之下,似是而非罷了。

繼續閱讀