【轉載】Javascript原型繼承-學習筆記

時間 2019-12-20

標籤轉載 javascript 原型繼承學習筆記欄目 JavaScript 简体版

原文原文鏈接

阮一峯這篇文章寫的很好javascript

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.htmlhtml

筆記以下：java

一直很難理解Javascript語言的繼承機制。
它沒有"子類"和"父類"的概念，也沒有"類"（class）和"實例"（instance）的區分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來實現繼承。
讀到法國程序員Vjeux的解釋，才恍然大悟，徹底明白了Javascript爲何這樣設計。

1、從古代提及程序員

Javascript裏面全部的數據類型都是對象（object），這一點與Java很是類似。可是，他隨即就遇到了一個難題，到底要不要設計"繼承"機制呢？

2、Brendan Eich的選擇編程

Brendan Eich最後仍是設計了"繼承"。
可是，他不打算引入"類"（class）的概念，由於一旦有了"類"，Javascript就是一種完整的面向對象編程語言了，
這好像有點太正式了，並且增長了初學者的入門難度。

C++和Java使用new命令時，都會調用"類"的構造函數（constructor）。他就作了一個簡化的設計，在Javascript語言中，new命令後面跟的不是類，
而是構造函數。

例來講，如今有一個叫作DOG的構造函數，表示狗對象的原型。
　　function DOG(name){
　　　　this.name = name;
　　}

對這個構造函數使用new，就會生成一個狗對象的實例。
　　var dogA = new DOG('大毛');
　　alert(dogA.name); // 大毛

3、new運算符的缺點數組

用構造函數生成實例對象，有一個缺點，那就是沒法共享屬性和方法。每個實例對象，都有本身的屬性和方法的副本。這不只沒法作到數據共享，也是極大的資源浪費。app

4、prototype屬性的引入編程語言

Brendan Eich決定爲構造函數設置一個prototype屬性。ide

這個屬性包含一個對象（如下簡稱"prototype對象"），全部實例對象須要共享的屬性和方法，都放在這個對象裏面；那些不須要共享的屬性和方法，就放在構造函數裏面。函數

實例對象一旦建立，將自動引用prototype對象的屬性和方法。也就是說，實例對象的屬性和方法，分紅兩種，一種是本地的，另外一種是引用的。

屬性放在prototype對象裏，是兩個實例對象共享的。只要修改了prototype對象，就會同時影響到兩個實例對象。

5、總結

因爲全部的實例對象共享同一個prototype對象，那麼從外界看起來，prototype對象就好像是實例對象的原型，而實例對象則好像"繼承"了prototype對象同樣。

這就是Javascript繼承機制的設計思想。下面三篇文章，介紹了繼承機制的具體應用方法：

　　* 《Javascript面向對象編程（一）：封裝》

　　* 《Javascript面向對象編程（二）：構造函數的繼承》

　　* 《Javascript面向對象編程（三）：非構造函數的繼承》

筆記以下：

一. 封裝

爲了解決從原型對象生成實例的問題，Javascript提供了一個構造函數（Constructor）模式。

所謂"構造函數"，其實就是一個普通函數，可是內部使用了this變量。

對構造函數使用new運算符，就能生成實例，而且this變量會綁定在實例對象上。

function Cat(name,color){
　　　　this.name=name;
　　　　this.color=color;
　　}

var cat1 = new Cat("大毛","黃色");
　　var cat2 = new Cat("二毛","黑色");
　　alert(cat1.name); // 大毛
　　alert(cat1.color); // 黃色

Javascript還提供了一個instanceof運算符，驗證原型對象與實例對象之間的關係。

alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true

構造函數模式的問題

構造函數方法很好用，可是存在一個浪費內存的問題。那就是對於每個實例對象，type屬性和eat()方法都是如出一轍的內容，每一次生成一個實例，都必須爲重複的內容，多佔用一些內存。這樣既不環保，也缺少效率。

Prototype模式

Javascript規定，每個構造函數都有一個prototype屬性，指向另外一個對象。這個對象的全部屬性和方法，都會被構造函數的實例繼承。

這意味着，咱們能夠把那些不變的屬性和方法，直接定義在prototype對象上。

這時全部實例的type屬性和eat()方法，其實都是同一個內存地址，指向prototype對象，所以就提升了運行效率。

　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
　　Cat.prototype.type = "貓科動物";
　　Cat.prototype.eat = function(){alert("吃老鼠")};

還有一種寫法：

function DOG(name){
　　　　this.name = name;
　　}
　　DOG.prototype = { species : '犬科' };

　　var dogA = new DOG('大毛');
　　var dogB = new DOG('二毛');

　　alert(dogA.species); // 犬科
　　alert(dogB.species); // 犬科

Prototype模式的驗證方法

爲了配合prototype屬性，Javascript定義了一些輔助方法，幫助咱們使用它。

isPrototypeOf()

這個方法用來判斷，某個proptotype對象和某個實例之間的關係。

alert(Cat.prototype.isPrototypeOf(cat1)); //true

hasOwnProperty()

每一個實例對象都有一個hasOwnProperty()方法，用來判斷某一個屬性究竟是本地屬性，仍是繼承自prototype對象的屬性。

alert(cat1.hasOwnProperty("name")); // true

alert(cat1.hasOwnProperty("type")); // false

in運算符

in運算符能夠用來判斷，某個實例是否含有某個屬性，不論是不是本地屬性。

alert("name" in cat1); // true

in運算符還能夠用來遍歷某個對象的全部屬性。

for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

二. 構造函數的繼承

要介紹的是，對象之間的"繼承"的五種方法。

1、構造函數綁定

第一種方法也是最簡單的方法，使用call或apply方法，將父對象的構造函數綁定在子對象上，即在子對象構造函數中加一行：

function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

2、 prototype模式

第二種方法更常見，使用prototype屬性。

若是"貓"的prototype對象，指向一個Animal的實例，那麼全部"貓"的實例，就能繼承Animal了。

Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

代碼的第一行，咱們將Cat的prototype對象指向一個Animal的實例。
　　Cat.prototype = new Animal();

它至關於徹底刪除了prototype 對象原先的值，而後賦予一個新值。
可是，第二行又是什麼意思呢？
　　Cat.prototype.constructor = Cat;

原來，任何一個prototype對象都有一個constructor屬性，指向它的構造函數。若是沒有"Cat.prototype = new Animal();"這一行，
Cat.prototype.constructor是指向Cat的；加了這一行之後，Cat.prototype.constructor指向Animal。
　　alert(Cat.prototype.constructor == Animal); //true

更重要的是，每個實例也有一個constructor屬性，默認調用prototype對象的constructor屬性。
　　alert(cat1.constructor == Cat.prototype.constructor); // true

所以，在運行"Cat.prototype = new Animal();"這一行以後，cat1.constructor也指向Animal！
　　alert(cat1.constructor == Animal); // true

這顯然會致使繼承鏈的紊亂（cat1明明是用構造函數Cat生成的），所以咱們必須手動糾正，將Cat.prototype對象的constructor值改成Cat。
這就是第二行的意思。

這是很重要的一點，編程時務必要遵照。下文都遵循這一點，即若是替換了prototype對象，
　　o.prototype = {};
那麼，下一步必然是爲新的prototype對象加上constructor屬性，並將這個屬性指回原來的構造函數。
　　o.prototype.constructor = o;

3、直接繼承prototype

第三種方法是對第二種方法的改進。因爲Animal對象中，不變的屬性均可以直接寫入Animal.prototype。因此，咱們也可讓Cat()跳過 Animal()，直接繼承Animal.prototype。

如今，咱們先將Animal對象改寫：
　　function Animal(){ }
　　Animal.prototype.species = "動物";

而後，將Cat的prototype對象，而後指向Animal的prototype對象，這樣就完成了繼承。
　　Cat.prototype = Animal.prototype;
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

與前一種方法相比，這樣作的優勢是效率比較高（不用執行和創建Animal的實例了），比較省內存。缺點是 Cat.prototype和Animal.prototype如今指向了同一個對象，那麼任何對Cat.prototype的修改，都會反映到Animal.prototype。

因此，上面這一段代碼實際上是有問題的。請看第二行
　　Cat.prototype.constructor = Cat;

這一句實際上把Animal.prototype對象的constructor屬性也改掉了！
　　alert(Animal.prototype.constructor); // Cat

4、利用空對象做爲中介

因爲"直接繼承prototype"存在上述的缺點，因此就有第四種方法，利用一個空對象做爲中介。

　　var F = function(){};
　　F.prototype = Animal.prototype;
　　Cat.prototype = new F();
　　Cat.prototype.constructor = Cat;

F是空對象，因此幾乎不佔內存。這時，修改Cat的prototype對象，就不會影響到Animal的prototype對象。
　　alert(Animal.prototype.constructor); // Animal

封裝成一個函數：

function extend(Child, Parent) {

　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

使用的時候，方法以下
　　extend(Cat,Animal);
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

這個extend函數，就是YUI庫如何實現繼承的方法。

另外，說明一點，函數體最後一行 Child.uber = Parent.prototype; 意思是爲子對象設一個uber屬性，這個屬性直接指向父對象的prototype屬性。（uber是一個德語詞，意思是"向上"、"上一層"。）這等於在子對象上打開一條通道，能夠直接調用父對象的方法。這一行放在這裏，只是爲了實現繼承的完備性，純屬備用性質。

5、拷貝繼承

能夠換一種思路，純粹採用"拷貝"方法實現繼承。

寫一個函數，實現屬性拷貝的目的。

function extend2(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;
　　}

使用的時候，這樣寫：

extend2(Cat, Animal);
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

三. 非構造函數的繼承

這個系列的第一部分介紹了"封裝"，第二部分介紹了使用構造函數實現"繼承"。

1、什麼是"非構造函數"的繼承？

好比，如今有一個對象，叫作"中國人"。
　　var Chinese = {
　　　　nation:'中國'
　　};
還有一個對象，叫作"醫生"。
　　var Doctor ={
　　　　career:'醫生'
　　}
請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成一個"中國醫生"的對象？

這裏要注意，這兩個對象都是普通對象，不是構造函數，沒法使用構造函數方法實現"繼承"。

2、object()方法

一個object()函數，能夠作到這一點。

　　function object(o) {
　　　　function F() {}
　　　　F.prototype = o;
　　　　return new F();
　　}
這個object()函數，其實只作一件事，就是把子對象的prototype屬性，指向父對象，從而使得子對象與父對象連在一塊兒。

使用的時候，第一步先在父對象的基礎上，生成子對象：
　　var Doctor = object(Chinese);

而後，再加上子對象自己的屬性：
　　Doctor.career = '醫生';

這時，子對象已經繼承了父對象的屬性了。
　　alert(Doctor.nation); //中國

3、淺拷貝

除了使用"prototype鏈"之外，還有另外一種思路：把父對象的屬性，所有拷貝給子對象，也能實現繼承。

下面這個函數，就是在作拷貝：
　　function extendCopy(p) {
　　　　var c = {};
　　　　for (var i in p) { 
　　　　　　c[i] = p[i];
　　　　}
　　　　c.uber = p;
　　　　return c;
　　}
使用的時候，這樣寫：
var Doctor = extendCopy(Chinese);
　　Doctor.career = '醫生';
　　alert(Doctor.nation); // 中國

可是，這樣的拷貝有一個問題。那就是，若是父對象的屬性等於數組或另外一個對象，那麼實際上，子對象得到的只是一個內存地址，而不是真正拷貝，所以存在父對象被篡改的可能。

4、深拷貝

所謂"深拷貝"，就是可以實現真正意義上的數組和對象的拷貝。它的實現並不難，只要遞歸調用"淺拷貝"就好了。

function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}

使用的時候這樣寫：

var Doctor = deepCopy(Chinese);

如今，給父對象加一個屬性，值爲數組。而後，在子對象上修改這個屬性：
　　Chinese.birthPlaces = ['北京','上海','香港'];
　　Doctor.birthPlaces.push('廈門');

這時，父對象就不會受到影響了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門

alert(Chinese.birthPlaces); //北京, 上海, 香港

目前，jQuery庫使用的就是這種繼承方法。

（完）