原型本質(zhì):所有的構(gòu)造函數(shù)都有一個(gè)prototype屬性,該屬性是指向函數(shù)的原型對(duì)象

所有的實(shí)例都有一個(gè)_proto_屬性,該屬性指向產(chǎn)生實(shí)例對(duì)象的構(gòu)造函數(shù)的原型

_proto_不是標(biāo)準(zhǔn)屬性,在Chrome,Safari,Firefox瀏覽器叫_proto_,在別的瀏覽器這個(gè)屬性對(duì)腳本是不可見的, 實(shí)際上該屬性是瀏覽器內(nèi)部使用的,編程的時(shí)候不允許使用

_proto_屬性和構(gòu)造函數(shù)中的prototype指向同一塊區(qū)域.因此下面代碼結(jié)果為true

console.log(Person.prototype===p1.__proto__) //true

原型的好處就是可以實(shí)現(xiàn)實(shí)例對(duì)象之間共享屬性和方法

function  Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.showName =function(){console.log(this.name);}
Person.prototype.showAge =function(){console.log(this.age);}
Person.prototype.arr = ['red','yellow'];
var p1 = new Person('zhangsan',12);
var p2 = new Person('lisi',13);
p1.showName();
p2.showName();
console.log(p1.showName === p2.showName);//true

prototype1.png

我們?cè)谡{(diào)用p1.showName()與p2.showName()時(shí),解析器會(huì)問:實(shí)例p1中有showName屬性嗎?答案是:沒有? 然后繼續(xù)問:p1原型中有showName屬性嗎?答案是:有,因此就可以讀取到在原型中的showName函數(shù)

上邊代碼 給原型中的arr數(shù)組push新的值,如p1.arr.push('black');p1與p2訪問到的值也是相同的

prototype1.png

注意
如果寫成p1.arr = ['pink'];相當(dāng)于創(chuàng)建了一個(gè)新的屬性,加到p1的實(shí)例對(duì)象,并沒有加到原型中;
因此獲取p1.arr的值就是pink,在執(zhí)行p1.arr的時(shí)候
解析器會(huì)問:實(shí)例對(duì)象p1中有arr屬性嗎? 答案是:有 ,如果在實(shí)例對(duì)象中找到了具有給定名字的屬性,那么就直接返回屬性的值,如果沒有找到才會(huì)到原型對(duì)象中找

總結(jié)
通過obj.arr =值;相當(dāng)于創(chuàng)建了一個(gè)新的屬性,加到obj中實(shí)例對(duì)象
但是obj.arr.push(123);這種結(jié)構(gòu)不會(huì)再obj中添加一個(gè)屬性,而是在arr中添加了一個(gè)值