JavaScript中Prototype、proto

XanaHopper 發(fā)布于2019-08-19 17:11 / 1115人閱讀

摘要：所以，在每個(gè)構(gòu)造函數(shù)都會(huì)有一個(gè)屬性，指向一個(gè)對象作為這個(gè)構(gòu)造函數(shù)構(gòu)造出來的新對象的原型。那么根據(jù)上面第二條事實(shí)，每個(gè)函數(shù)也會(huì)有指向它的構(gòu)造函數(shù)的。而這個(gè)構(gòu)造函數(shù)的函數(shù)就是，中的所有函數(shù)都是由構(gòu)造出來的。

“__proto__”

JavaScript是一個(gè)面向?qū)ο笳Z音，即一切皆對象。

那么怎么生成對象？在Java的世界里，對象是由類（Class）實(shí)例出來的，通俗地說，就是將事物抽象成一個(gè)模具，用這個(gè)模具（類）生產(chǎn)出一個(gè)個(gè)具體的實(shí)物（對象）。

可是JS中沒有類這個(gè)概念，有的是“原型”，對象是由原型衍生出來的。通俗地說，在JS的世界里，“原型”并不是一個(gè)模具，而是一個(gè)具體的實(shí)物（對象）。所有對象都是由另一個(gè)對象衍生出來的，而這個(gè)被衍生的對象就是所謂的“原型對象”。

每一個(gè)對象自動(dòng)生成一個(gè)屬性：__proto__，這個(gè)屬性是一個(gè)引用對象，其指向這個(gè)對象的“原型對象”。

Talk is cheap, show me the code! 咱們來看看代碼：

var obj = {};
console.log(obj);

咱們將__proto__展開看看：是一些默認(rèn)方法。

你一定會(huì)發(fā)生這個(gè)__proto__對象中也有一個(gè)__proto__對象，正如我們剛才說的，每個(gè)對象都有一個(gè)__proto__屬性指向它的原型對象。我們打印一下這個(gè)__proto__中的__proto__：

console.log(obj.__proto__.__proto__); //--> null

結(jié)果是null，說明已經(jīng)到了頂層原型對象。obj是用大括號(hào){}定義的，obj的原型對象自然是JS的頂層對象。

咱們再看一端代碼，加強(qiáng)下理解：

var parent = {
    name : "parent"
};
var child = {
    name : "child",
    __proto__ : parent
};
var subChild = {
    name : "subChild",
    __proto__ : child
}
console.log(subChild);

subChild.__proto__ --> child
child.__proto__ --> parent
parent.__proto__ --> 頂層原型對象

prototype

上面我們說到，每一個(gè)對象都包含一個(gè)__proto__，指向這個(gè)的對象的“原型”。
類似的事情是，每一個(gè)函數(shù)都包含一個(gè)prototype，這個(gè)prototype對象干什么的了？

咱們看看如下代碼，用構(gòu)造函數(shù)來創(chuàng)建一個(gè)對象（上面是用字面量的形式創(chuàng)建對象）。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

試想想，這個(gè)foo對象的__proto__會(huì)指向什么？

一個(gè)包含constructor屬性的對象？看不太懂沒關(guān)系，把函數(shù)Foo的prototype屬性打印出來，對比一下就知道了。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

原來，new出來的對象foo的__proto__就只指向函數(shù)Foo的prototype。
foo.__proto__ --> Foo.prototype

JS這么設(shè)計(jì)有何意義了？回憶下上面說的，在JS的世界中，對象不是根據(jù)類（模具）創(chuàng)建出來的，而是從原型（另一個(gè)對象）衍生出來的。

當(dāng)我們執(zhí)行new操作創(chuàng)建一個(gè)新的對象時(shí)，先不深入new操作的具體實(shí)現(xiàn)，但有一點(diǎn)我們是肯定的——就是為新對象的__proto__指向一個(gè)原型對象。

就剛才這段代碼

function Foo(){};
var foo = new Foo();

foo.__proto__到底要指向誰了？你怎么不能指向Foo這個(gè)函數(shù)本身吧，雖然函數(shù)也是對象，這個(gè)有機(jī)會(huì)會(huì)詳細(xì)講。但如何foo.__proto__指向Foo固然不合適，因?yàn)镕oo是一個(gè)函數(shù)，有很多邏輯代碼，foo作為一個(gè)對象，繼承邏輯處理沒有任何意義，它要繼承的是“原型對象”的屬性。

所以，每個(gè)函數(shù)會(huì)自動(dòng)生成一個(gè)prototype對象，由這個(gè)函數(shù)new出來的對象的__proto__就指向這個(gè)函數(shù)的prototype。
foo.__proto__ --> Foo.prototype

總結(jié)

說了這么多，感覺還是沒完全說清楚，不如上一張圖。我曾經(jīng)參考過其他網(wǎng)友的圖，但總覺得哪里沒說清楚，所以我自己畫了一張圖，如果覺得我的不錯(cuò)，請點(diǎn)個(gè)贊！（老子可是費(fèi)了牛勁才畫出來）。

（點(diǎn)擊可放大）

咱們就著這張圖，記住如下幾個(gè)事實(shí)：

1. 每個(gè)對象中都有一個(gè)_proto_屬性。

JS世界中沒有類（模具）的概念，對象是從另一個(gè)對象（原型）衍生出來的，所以每個(gè)對象中會(huì)有一個(gè)_proto_屬性指向它的原型對象。（參考左上角的那個(gè)用字面量形式定義的對象obj，它在內(nèi)存中開辟了一個(gè)空間存放對象自身的屬性，同時(shí)生成一個(gè)_proto_指向它的原型——頂層原型對象。）

2. 每個(gè)函數(shù)都有一個(gè)prototype屬性。

“構(gòu)造函數(shù)”為何叫構(gòu)造函數(shù)，因?yàn)樗獦?gòu)造對象。那么根據(jù)上面第一條事實(shí)，構(gòu)造出來的新對象的_proto_屬性指向誰了？總不能指向構(gòu)造函數(shù)自身，雖然它也是個(gè)對象，但你不希望新對象繼承函數(shù)的屬性與方法吧。所以，在每個(gè)構(gòu)造函數(shù)都會(huì)有一個(gè)prototype屬性，指向一個(gè)對象作為這個(gè)構(gòu)造函數(shù)構(gòu)造出來的新對象的原型。

3. 函數(shù)也是對象。

每個(gè)函數(shù)都有一些通用的屬性和方法，比如apply()/call()等。但這些通用的方法是如何繼承的呢？函數(shù)又是怎么創(chuàng)建出來的呢？試想想，一切皆對象，包括函數(shù)也是對象，而且是通過構(gòu)造函數(shù)構(gòu)造出來的對象。那么根據(jù)上面第二條事實(shí)，每個(gè)函數(shù)也會(huì)有_proto_指向它的構(gòu)造函數(shù)的prototype。而這個(gè)構(gòu)造函數(shù)的函數(shù)就是Function，JS中的所有函數(shù)都是由Function構(gòu)造出來的。函數(shù)的通用屬性與方法就存放在Function.prototype這個(gè)原型對象上。