資訊專欄INFORMATION COLUMN
摘要：如果要理解基于原型實(shí)現(xiàn)面向?qū)ο蟮乃枷耄敲蠢斫庵械萌齻€(gè)重要概念構(gòu)造函數(shù)原型原型鏈對(duì)幫助理解基于原型的面向?qū)ο笏枷刖惋@得尤為重要。函數(shù)對(duì)象的原型在中，函數(shù)是一種特殊的對(duì)象，所有的函數(shù)都是構(gòu)造函數(shù)的實(shí)例。
介紹
和java這種基于類(lèi)（class-base）的面向?qū)ο蟮木幊陶Z(yǔ)言不同，javascript沒(méi)有類(lèi)這樣的概念，但是javascript也是面向?qū)ο蟮恼Z(yǔ)言，這種面向?qū)ο蟮姆绞匠蔀?基于原型（prototype-base）的面向?qū)ο?。雖然說(shuō)ES6已經(jīng)引入了類(lèi)的概念來(lái)作為模板，通過(guò)關(guān)鍵字 “class” 可以定義類(lèi)，但ES6的這種寫(xiě)法可以理解為一種語(yǔ)法糖，它的絕大部分功能，ES5都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。如果要理解基于原型實(shí)現(xiàn)面向?qū)ο蟮乃枷?，那么理解javascript中得三個(gè)重要概念： 構(gòu)造函數(shù)（constructor）、原型（prototype）、原型鏈（prototype chain） 對(duì)幫助理解基于原型的面向?qū)ο笏枷刖惋@得尤為重要。下面就重點(diǎn)介紹一下這幾個(gè)概念。
javascript對(duì)象結(jié)構(gòu)圖先來(lái)看一張來(lái)自mollypages.org 的javascript對(duì)象的結(jié)構(gòu)圖，下面的例子都按照這張圖闡述。
構(gòu)造函數(shù)（constructor）和原型 （prototype）構(gòu)造函數(shù)是用來(lái)初始化對(duì)象的，每個(gè)構(gòu)造函數(shù)都有一個(gè)不可枚舉的屬性，這就是原型（prototype）.并且，每個(gè)prototype 都包含一個(gè)包含了不可枚舉屬性的constructor屬性，這個(gè)屬性始終會(huì)指向構(gòu)造函數(shù)。
javascript function Foo(){};
console.log(Foo.prototype.constructor === Foo); // true
原型鏈（prototype chain）
使用new實(shí)例化的原型
每個(gè)被new實(shí)例化的對(duì)象都會(huì)包含一個(gè)__proto__ 屬性，它是對(duì)構(gòu)造函數(shù) prototype 的引用。
javascript function Foo(){};
var foo = new Foo();
console.log(foo.__proto__ === Foo.prototype); // ture
javascript function Foo(){};
console.log(Foo.prototype.__proto__ === Object.prototype); // true
上面返回true 的原因是Foo.prototype 是Object預(yù)創(chuàng)建的一個(gè)對(duì)象，是Object創(chuàng)建的一個(gè)實(shí)例，所以，F(xiàn)oo.prototype.__proto_ 是Object.prototype的引用。
我們可以來(lái)看一下原型鏈的脈絡(luò)。
函數(shù)（function）對(duì)象的原型在javascript中，函數(shù)是一種特殊的對(duì)象，所有的函數(shù)都是構(gòu)造函數(shù) Function 的實(shí)例。
javascript function Foo() {};
console.log(Foo.__proto__ === Object.prototype); //false
console.log(Fool.__proto__ === Function.prototype); // true
從上面可以看出,函數(shù)Foo.__proto_ 指向到 Function.prototype, 說(shuō)明函數(shù) Foo 是 Function的一個(gè)實(shí)例。
javascript function Foo(){};
console.log(Foo.__proto__ === Function.prototype); //true
console.log(Foo.prototype.__proto__ === Object.prototype);//true
Foo.prototype 是Object預(yù)定義的對(duì)象，構(gòu)造函數(shù)為Object,所以__proto__指向 Object.prototype
從上面的圖我們可以看出， Object、Function、Array 等這些函數(shù)，他們的構(gòu)造函數(shù)都是 Function 的實(shí)例。
基于原型鏈的繼承有了上面的基礎(chǔ)知識(shí)以后，我們就可以自己去基于原型鏈去封裝對(duì)象，實(shí)現(xiàn)javascript的繼承。先來(lái)看下面一個(gè)例子。
運(yùn)行上面的例子，輸入 cat init 和 animal eat，說(shuō)明cat 繼承了 Animal.prototype.eat 的方法。
我們來(lái)分析一下代碼。
1、Animal 的prototype中定義了 eat方法。
2、將Empty.prototype 指向 Animal.prototype , 所以 Empty.prototype 中也存在eat方法.
3、Cat.prototype == new Empty(),所以 Cat.prototype.__proto_ === Animal.__proto_.
4、重新為Cat指定constructor為Cat,否則Cat不存在constructor。
這樣就完成了繼承，原型鏈?zhǔn)沁@樣的:
這樣我們用原型鏈的方式實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的繼承方式。
參考基于原型的javascript 面向?qū)ο缶幊?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85725.html
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：面向?qū)ο竺嫦驅(qū)ο蟮母攀雒嫦驅(qū)ο笫鞘裁疵嫦驅(qū)ο缶幊痰娜Q是，簡(jiǎn)稱。面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程。面向?qū)ο缶幊炭梢钥醋鍪鞘褂靡幌盗袑?duì)象相互協(xié)作的軟件設(shè)計(jì)。面向?qū)ο缶幊痰纳礁柚饕奶卣魇欠庋b繼承多態(tài)。 面向?qū)ο?面向?qū)ο蟮母攀?面向?qū)ο笫鞘裁?面向?qū)ο缶幊痰娜Q是Object Oriented Programming，簡(jiǎn)稱OOP。面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)...
摘要：說(shuō)到底面向?qū)ο蟛攀浅绦蛘Z(yǔ)言的根本。其實(shí)面向?qū)ο缶幊陶f(shuō)的就是自定義對(duì)象。里并沒(méi)有類(lèi)的概念，所以嚴(yán)格上來(lái)講這是個(gè)假的面向?qū)ο罄锏拿嫦驅(qū)ο缶幊态F(xiàn)在好了，終于聽(tīng)到別人鄙視我們了，給我們提供了類(lèi)這個(gè)概念，其實(shí)是向傳統(tǒng)語(yǔ)言更靠齊了。 通過(guò)前兩篇文章，我們了解了對(duì)象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識(shí)，那前面說(shuō)了對(duì)象分類(lèi)里的前兩種，這篇文章要詳細(xì)去說(shuō)第三種自定義對(duì)象，那真正的好戲這就來(lái)了！ 面向?qū)ο?..
閱讀 1210·2021-11-10 11:35
閱讀 2951·2021-09-24 10:35
閱讀 2975·2021-09-22 15:38
閱讀 2815·2019-08-30 15:43
閱讀 1349·2019-08-29 18:39
閱讀 2592·2019-08-29 15:22
閱讀 2802·2019-08-28 18:17
閱讀 619·2019-08-26 13:37
