js里的proto和prototype到底有什么區(qū)別？
http://www.reibang.com/p/80bcf8b2004e
幫你徹底搞懂JS中的prototype烙常、proto與constructor（圖解）
https://blog.csdn.net/cc18868876837/article/details/81211729
prototype 原型
_ _ proto _ _ 原型
constructor 構(gòu)造器
額外
既然是數(shù)組方法朝捆，那就要封裝在Array.prototype上。Array.prototype.myForEach = function () {fn},這里的函數(shù)表達(dá)式執(zhí)行就是arr.myForEach ()国章。
在學(xué)習(xí)JS的面向?qū)ο筮^(guò)程中具钥，一直對(duì)constructor與prototype感到很迷惑，看了一些博客與書(shū)籍液兽，覺(jué)得自己弄明白了骂删，現(xiàn)在記錄如下：
我們都知道，在JS中有一個(gè)function的東西四啰。一般人們叫它函數(shù)宁玫。比如下面的代碼
js代碼：
function Person(name) {
alert(name);
}
Person('js');//js
上面的代碼中，Person的表現(xiàn)的確跟一般的函數(shù)沒(méi)有什么區(qū)別柑晒，接著看下面的代碼
unction Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
var one=new Person(‘JavaScript’);
one.showMe();//JavaScript
很多人見(jiàn)到了久違的new操作符欧瘪，于是就叫Person為“類(lèi)”，可是又沒(méi)有關(guān)鍵字class的出現(xiàn)匙赞，覺(jué)得叫“類(lèi)”有點(diǎn)勉強(qiáng)佛掖。于是退而求其次叫Person為類(lèi)的構(gòu)造函數(shù)。這些概念好像都沒(méi)有錯(cuò)涌庭，之所以出現(xiàn)這樣的情況芥被，可能是因?yàn)榇蠹叶紝W(xué)習(xí)了傳統(tǒng)的面向?qū)ο笳Z(yǔ)言（c++，c#坐榆，java等）拴魄，還有一種思維定勢(shì)吧。為了讓javascript也面向?qū)ο螅趈avascript中找到與傳統(tǒng)面向?qū)ο笳Z(yǔ)言的影子匹中∈凑可是按照javascript的說(shuō)法，function定義的這個(gè)Person就是一個(gè)Object(對(duì)象),而且還是一個(gè)很特殊的對(duì)象职员，這個(gè)使用function定義的對(duì)象與使用new操作符生成的對(duì)象之間有一個(gè)重要的區(qū)別。這個(gè)區(qū)別就是function定義的對(duì)象有一個(gè)prototype屬性跛溉，使用new生成的對(duì)象就沒(méi)有這個(gè)prototype屬性焊切。
__proto__ 兩種都有
prototype賦值使用 __proto__ 才是鏈 打印出來(lái)的原型鏈上，越往下展開(kāi)是表示他的父級(jí)（范圍越大）
ps:
function a() {} --------> a.prototype.__proto__.constructor 指的是 object
var b = new a() --------> b.__proto__.constructor 指的是 function a()
因?yàn)樵玩溕?b的上級(jí)是a芳室，a的上級(jí)是 object
console中無(wú)prototype 专肪，只有__proto__ 用來(lái)查看
如果調(diào)用 b某個(gè)方法或?qū)傩裕瑫?huì)先找b堪侯，找不到會(huì)順著 鏈 向上找a
b. __proto__ === a. prototype;
prototype屬性又指向了一個(gè)prototype對(duì)象嚎尤，注意prototype屬性與prototype對(duì)象是兩個(gè)不同的東西熟史，要注意區(qū)別勺馆。在prototype對(duì)象中又有一個(gè)constructor屬性，這個(gè)constructor屬性同樣指向一個(gè)constructor對(duì)象芝囤，而這個(gè)constructor對(duì)象恰恰就是這個(gè)function函數(shù)本身次洼。
有點(diǎn)頭暈关贵，看下圖吧：
不相信可以看下面的代碼：
function Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
var one=new Person('js');
alert(one.prototype)//undefined
alert(typeof Person.prototype);//object
alert(Person.prototype.constructor);//function Person(name) {...};
上面的代碼證明了one這個(gè)對(duì)象沒(méi)有prototype屬性。
我們接著看代碼：
function Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
Person.prototype.from=function() {
alert(‘I come from prototype.’);
}
var one=new Person(‘js’);
one.showMe();//js,這個(gè)結(jié)果沒(méi)有什么好奇怪的
one.from();//I come from prototype.卖毁，這個(gè)結(jié)果有一點(diǎn)奇怪吧
要解釋這個(gè)結(jié)果就要仔細(xì)研究一下new這個(gè)操作符了.var one=new Person(‘js’);這個(gè)語(yǔ)句執(zhí)行的過(guò)程可以分成下面的語(yǔ)句：
var one={};
Person.call(one,'js');
按照《悟透javascript》書(shū)中說(shuō)的揖曾，new形式創(chuàng)建對(duì)象的過(guò)程實(shí)際上可以分為三步：
第一步是建立一個(gè)新對(duì)象（叫A吧）；
第二步將該對(duì)象（A）內(nèi)置的原型對(duì)象設(shè)置為構(gòu)造函數(shù)(就是Person)prototype 屬性引用的那個(gè)原型對(duì)象亥啦；
第三步就是將該對(duì)象（A）作為this 參數(shù)調(diào)用構(gòu)造函數(shù)(就是Person)炭剪，完成成員設(shè)置等初始化工作。
其中第二步中出現(xiàn)了一個(gè)新名詞就是內(nèi)置的原型對(duì)象翔脱，注意這個(gè)新名詞跟prototype對(duì)象不是一回事奴拦，為了區(qū)別我叫它inobj,inobj就指向了函數(shù)Person的prototype對(duì)象。在person的prototype對(duì)象中出現(xiàn)的任何屬性或者函數(shù)都可以在one對(duì)象中直接使用届吁，這個(gè)就是javascript中的原型繼承了粱坤。
又頭暈了，上圖吧瓷产！
這樣one對(duì)象通過(guò)內(nèi)置的原型對(duì)象inobj就可以直接訪問(wèn)Person的prototype對(duì)象中的任何屬性與方法了站玄。這也就解釋了上面的代碼中為什么one可以訪問(wèn)form函數(shù)了。因?yàn)閜rototype對(duì)象中有一個(gè)constructor屬性濒旦，那么one也可以直接訪問(wèn)constructor屬性株旷。
代碼：
function Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
Person.prototype.from=function() {
alert('I come from prototype.');
}
var one=new Person('js');
one.showMe();//js,這個(gè)結(jié)果沒(méi)有什么好奇怪的
one.from();//I come from prototype.，這個(gè)結(jié)果有一點(diǎn)奇怪吧
alert(one.constructor);//function Person(name) {...}
alert(Person.prototype.constructor);//function Person(name) {...}
再看看繼承是如何實(shí)現(xiàn)的
function Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
Person.prototype.from=function() {
alert('I come from prototype.');
}
function SubPerson() {
}
SubPerson.prototype=new Person();
var subOne=new SubPerson();
subOne.from();//I come from prototype.
alert(subOne.constructor);//function Person(name) {...};
alert(SubPerson.prototype.constructor);//function Person(name) {...};
繼承的實(shí)現(xiàn)很簡(jiǎn)單，只需要把子類(lèi)的prototype設(shè)置為父類(lèi)的一個(gè)對(duì)象即可晾剖。注意這里說(shuō)的可是對(duì)象哦锉矢！
那么通過(guò)prototype屬性實(shí)現(xiàn)繼承的原理是什么呢？還是先看圖形說(shuō)明齿尽，然后編寫(xiě)代碼進(jìn)行驗(yàn)證沽损。
注意：紅色的方框就是把子類(lèi)與父類(lèi)鏈接起來(lái)的地方。這個(gè)就應(yīng)該是傳說(shuō)中的prototype鏈了吧循头。下面有代碼進(jìn)行驗(yàn)證绵估。
js代碼:
function Person(name) {
this.name=name;
this.showMe=function() {
alert(this.name);
}
};
Person.prototype.from=function() {
alert('I come from prototype.');
}
var father=new Person('js');//為了下面演示使用showMe方法，采用了js參數(shù),實(shí)際多采用無(wú)參數(shù)
alert(father.constructor);//查看構(gòu)造函數(shù),結(jié)果是:function Person(name) {...};
function SubPer() {
}
SubPer.prototype=father;//注意這里
SubPer.prototype.constructor=SubPer;
var son=new SubPer();
son.showMe();//js
son.from();//I come from prototype.
alert(father.constructor);//function SubPer(){...}
alert(son.constructor);//function SubPer(){...}
alert(SubPer.prototype.constructor);//function SubPer(){...}
根據(jù)上圖的prototype鏈卡骂，還有代碼的結(jié)果国裳，我想應(yīng)該明白為什么使用prototype能夠?qū)崿F(xiàn)
JS中的繼承了吧。
