面向?qū)ο笾蓄愔傅氖峭活愋蛯?duì)象的抽象，首字母大寫，比如上文中的形狀 Shape 類，三角形是通過Shape擴(kuò)展而來，則也是一個(gè)類，Shape稱之為它的父類，它是Shape的子類，同理 Rect也是Shape的一個(gè)子類。類的具體抽象稱之為實(shí)例，通常為小寫，創(chuàng)建實(shí)例的過程稱之為實(shí)例化。上文中triangle就是一個(gè)Triangle三角形的實(shí)例，指具體畫出的那個(gè)三角形。關(guān)于父類，子類，實(shí)例我們再用一個(gè)一個(gè)示例來展示

父類 Animal 
子類 Cat 實(shí)例 cat1_tom
子類 Dog 實(shí)例 dog1

Animal 指所有動(dòng)物，Cat 指所有貓 繼承Animal 是動(dòng)物的一個(gè)子類，cat1_tom 指的具體一個(gè)叫 tom 的貓。有了類我們就需要給類加一些標(biāo)識(shí)，以區(qū)分類之間的區(qū)別、即屬性和方法。

當(dāng)我們弄清楚了類是什么，JavaScript沒有類的概念，是通過原型來實(shí)現(xiàn)面向?qū)ο?。在以類為中心的面向?qū)ο缶幊陶Z言中，類和對(duì)象的關(guān)系可以想象成鑄模和鑄件的關(guān)系，對(duì)象總是從類中創(chuàng)建而來。而在原型編程的思想中，類并不是必需的，對(duì)象未必需要從類中創(chuàng)建而來，一個(gè)對(duì)象是通過克隆另外一個(gè)對(duì)象所得到的。

從設(shè)計(jì)模式的角度講，原型模式是用于創(chuàng)建對(duì)象的一種模式，如果我們想要?jiǎng)?chuàng)建一個(gè)對(duì)象，一種方法是先指定它的類型，然后通過類來創(chuàng)建這個(gè)對(duì)象。原型模式選擇了另外一種方式，我們不再關(guān)心對(duì)象的具體類型，而是找到一個(gè)對(duì)象，然后通過克隆來創(chuàng)建一個(gè)一模一樣的對(duì)象。而克隆出來的這個(gè)對(duì)象會(huì)記住他的原型，由誰克隆而來，同時(shí)也會(huì)共享原型的屬性和方法。這樣一個(gè)一個(gè)對(duì)象克隆而來，則形成了一條原型鏈。對(duì)上文中的例子而言，三角形的原型是形狀，貓和狗的原型是動(dòng)物。

在java中new Class()new 之后跟的是一個(gè)類名，而在js中類之后跟的是一個(gè)構(gòu)造函數(shù)。

function Shape(name) {
  this.val = 1;
  this.name = name;
  this.all = "圖形";
  return this.name
}
let a = Shape("a"); // "a"

let shape1 = new Shape("triangle"); 
let shape2 = new Shape("rect");

構(gòu)造函數(shù)的定義與一般函數(shù)的定義相同，注意首字母大寫。構(gòu)造函數(shù)本質(zhì)上還是一個(gè)函數(shù)，可以傳參可以有返回值，只是內(nèi)部使用了this變量，函數(shù)存在調(diào)用問題：

直接調(diào)用：在瀏覽器環(huán)境中相當(dāng)于在window上掛在了val這個(gè)屬性，值為1。請(qǐng)注意這個(gè)特點(diǎn)，如果Shape.call(obj) 即相當(dāng)于設(shè)定obj對(duì)象的val為1。

new 調(diào)用：生成一個(gè)實(shí)例，即生成一個(gè)新對(duì)象，這個(gè)this指向當(dāng)前新生成的對(duì)象。

這里的概念還希望大家閱讀緩慢 最好能在瀏覽器或者node環(huán)境下敲一下理解更深。請(qǐng)首先一定理解何為實(shí)例何為構(gòu)造函數(shù)(構(gòu)造器)。他們的關(guān)系是
__A為B的構(gòu)造函數(shù) 則 B為A的一個(gè)實(shí)例__。

首先創(chuàng)建一個(gè)Cat的構(gòu)造函數(shù)，希望say是Cat的實(shí)例共享屬性，

function Cat(name) {
  this.name = name;
  this.say = function() {console.log(this.name)};
}

let cat1 = new Cat("tom"); 
let cat2 = new Cat("bob");
cat1.say === cat2.say // false

但是發(fā)現(xiàn)cat1 cat2的共有方法all并沒有共享，每一個(gè)實(shí)例對(duì)象，都有自己的屬性和方法的副本。這不僅無法做到數(shù)據(jù)共享，也是極大的資源浪費(fèi)， 那么引入prototype對(duì)象：

function Cat(name) {
  this.name = name;
}
Cat.prototype.say = function() {
  console.log(this.name);
}
let cat1 = new Cat("tom"); 
let cat2 = new Cat("bob");
cat1.say === cat2.say 
cat1.say === Cat.prototype.say; // true
cat1.prototype; // undefined
cat1.hasOwnProperty("say");// false

__實(shí)例對(duì)象的constructor屬性指向其構(gòu)造函數(shù)(1)__，這樣看起來實(shí)例對(duì)象好像“繼承”了prototype對(duì)象一樣。__實(shí)例沒有prototype__，上文最后一行代碼通過hasOwnPropertyk可以判斷say這個(gè)方法并不是cat1自己的方法，__如果一個(gè)方法沒有在實(shí)例對(duì)象自身找到，則向其構(gòu)造函數(shù)prototype中開始尋找(2)__。

既然實(shí)例是繼承自構(gòu)造器的prototype，那么有沒有一個(gè)屬性可以直接表示對(duì)象的繼承關(guān)系呢？答案是有的__proto__，很多瀏覽器都實(shí)現(xiàn)了這個(gè)屬性，如下所示。

cat1.__proto__ === Cat.prototype // true
Cat.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true

從上我們可以發(fā)現(xiàn) Cat 構(gòu)造器的原型為Function.prototype ，Cat.prototype的原型為Object.prototype，所以當(dāng)cat1調(diào)toString時(shí) Cat.prototype上沒有找到 就去Function.prototype上尋找，這就構(gòu)成了原型鏈。但是對(duì)象的原型鏈查找和構(gòu)造函數(shù)的原型查找又有一點(diǎn)小區(qū)別(不查Function)，構(gòu)造器生成的實(shí)例對(duì)象原型鏈的查找過程可以如下表示：

cat1 
 => cat1.__proto__(Cat.prototype) 
 => cat1.__proto__.__proto__(Function.prototype) 
 => cat1.__proto__.__proto__.__proto__ (Object.prototype)

還有通過對(duì)象字面量創(chuàng)建的對(duì)象的原型鏈查找方式

let obj = {};
obj => obj.__proto__(Object.prototype) ;

這里根據(jù)上文__加粗(2)__的語言可以得到__Function.prototype 的構(gòu)造函數(shù)是Object(3)__。關(guān)于兩者的關(guān)系，我們后續(xù)繼續(xù)討論。

上文的兩個(gè)實(shí)例對(duì)象cat1 cat2，他們都具有一個(gè)屬性constructor，指向?qū)嵗臉?gòu)建函數(shù)Cat，意思是他們由Cat創(chuàng)建而來。__實(shí)例有一個(gè)constructor屬性，指向其構(gòu)造函數(shù)(4)__

cat1.constructor === Cat; // true
cat1.constructor === Cat; // true
Cat.constructor === Function; // true
Cat.prototype.constructor === Cat; // true

Object.constructor === Function;// true

構(gòu)造函數(shù)同樣具有construtor，指向Function，Cat.prototype同樣具有construtor，指向他自身，__構(gòu)造函數(shù)的prototype對(duì)象的constructor指向該構(gòu)造函數(shù)(5)__。

根據(jù)上文最后一行代碼 可以判斷Object 的構(gòu)造函數(shù) 是Function。則我們可以得到Object是Function的一個(gè)實(shí)例。如下Object 與 Function的關(guān)系是

Object是Function的一個(gè)實(shí)例。

Function.prototype 是 Object 的 一個(gè)實(shí)例。

根據(jù)上文總結(jié)如下：

實(shí)例對(duì)象的constructor指向其構(gòu)造器。

實(shí)例對(duì)象沒有prototype。

實(shí)例對(duì)象可以通過構(gòu)造函數(shù)的prototype對(duì)象實(shí)現(xiàn)屬性方法共享?！?/p>

實(shí)例對(duì)象的__proto__原型指向其構(gòu)造函數(shù)的prototype對(duì)象

構(gòu)造器的constructor指向 Function。

構(gòu)造函數(shù)的prototype可以掛在公共屬性方法，prototype的constructor屬性指向該構(gòu)造函數(shù)。

構(gòu)造函數(shù)的__proto__原型指向 Function.prototype。

構(gòu)造函數(shù)prototype對(duì)象的__proto__原型指向Object.prototype。

對(duì)象原型指的是對(duì)象的__proto__屬性。

通過上面的知識(shí)我們已經(jīng)了解了原型的概念，接下來我們來一步一步實(shí)現(xiàn)基于原型的繼承。
在繼承之前，我們有必要統(tǒng)一一下概念及名詞，

實(shí)例的歸實(shí)例 構(gòu)造器的歸構(gòu)造器

function Animal(name) {
  let name = name; // 私有屬性
  this.getName = function() { // 特權(quán)方法 也是實(shí)例方法
      this.log(name);
    return name;
  }
  this.color = "none"; // 實(shí)例屬性
  this.say = function() { // 實(shí)例方法
    console.log(this.color);
  }
}
Animal.prototype.a = 1; // 公共屬性
Animal.prototype.log = function(sth) { // 公共方法
  consoel.log(sth)
}

js沒有嚴(yán)格意義的私有成員，所以對(duì)象屬性都算做公開，所以我們在私有 公有上不做贅述，只是判斷改屬性是在實(shí)例上 還是在構(gòu)造函數(shù)的prototype上。

私有屬性：指的是構(gòu)造器內(nèi)部的屬性，構(gòu)造器外部不可以獲得，只能通過特權(quán)方法來訪問。

特權(quán)方法：一般稱有權(quán)訪問私有變量和私有函數(shù)的公有方法為特權(quán)方法，但是js沒有共有方法的概念，這個(gè)方法是掛載在實(shí)例上的。

實(shí)例屬性(方法)：實(shí)例屬性指的是掛載在實(shí)例自身的屬性。

公共屬性(方法)：公共屬性指的是掛在在構(gòu)造器的prototype對(duì)象上的屬性。

1. 直接修改prototype

我們已經(jīng)知道實(shí)例對(duì)象可以通過構(gòu)造函數(shù)的prototype對(duì)象實(shí)現(xiàn)屬性方法共享。即實(shí)例對(duì)象繼承了構(gòu)造器的.prototype對(duì)象，那么構(gòu)造器和構(gòu)造器之間的繼承是不是也可以用這樣的方式。

function Animal() {
  this.special = "貓";
};
function Cat() {}
let cat1 = new Cat();

如上，cat1要繼承Animal的special屬性，

首先 cat1 作為構(gòu)造器Cat 的一個(gè)實(shí)例可以繼承 Cat.prototype 對(duì)象中得屬性。

Cat.prototype 作為一個(gè)對(duì)象則應(yīng)該繼承 Animal.protoype.

Cat.prototype 應(yīng)該作為構(gòu)造函數(shù)Animal的一個(gè)實(shí)例。

function Animal() {
  this.special = "貓";
  this.arr = [2,3];
};
function Cat() {}
Cat.prototype = new Animal();
let cat1 = new Cat();
cat1.special; // "貓";

let cat2 = new Cat();
cat1.special = "狗";
cat2.special; // "貓"
cat1.special === Cat.prototype.special; // false
cat1.arr.push(1);
cat1.arr; // [2,3,1];
cat1.arr; // [2,3,1];

雖然我們很簡單就實(shí)現(xiàn)了繼承，但是問題一轉(zhuǎn)變，就出現(xiàn)了bug。比如我現(xiàn)在希望cat1 cat2 的special 都是公共屬性，arr 是實(shí)例屬性?？梢园l(fā)現(xiàn)cat1操作了special 這個(gè)公共屬性，cat2.special并沒有改變，但是cat1.arr 改變后 cat2.arr 也改變了。其次，構(gòu)造器之間的繼承不能傳遞參數(shù)，那讓我們更正2.0

2. 構(gòu)造函數(shù)的函數(shù)特性

function Animal(name) {
  this.name = name;
  this.arr = [2,3];
};
Animal.prototype.special = "貓";

function Cat(name) { 
  Animal.apply(this, arguments);
}

Cat.prototype = new Animal();

let cat1 = new Cat("tom");
let cat2 = new Cat("mary");

cat1.special = "狗"; 
cat2.special; // 貓;
cat1.hasOwnProperty("special"); // true
cat2.hasOwnProperty("special;); // false,

cat1.arr.push(1);
cat1.arr; // [2,3,1];
cat2.arr; // [2,3];

cat1.name; // "tom"
cat2.name; // "mary"

special作為公共的屬性掛載在父級(jí)構(gòu)造器prototype上，雖然我們修改了cat1.special cat2.special沒有改變，這主要是因?yàn)閏at1.special 的改變是作用在實(shí)例而不是原型上，大家可以把這個(gè)公共屬性改成數(shù)組或?qū)ο?作為一個(gè)引用存儲(chǔ)，就可以發(fā)現(xiàn)special是公共屬性。cat1.arr的操作不影響cat2.arr的操作。而且可以實(shí)現(xiàn)構(gòu)造器直接傳參，這里實(shí)在子級(jí)構(gòu)造器的內(nèi)部直接調(diào)用父級(jí)構(gòu)造器，構(gòu)造器調(diào)用方式的區(qū)別前文也介紹過了。

看到這里，好像我們已經(jīng)實(shí)現(xiàn)繼承了，但是依然存在問題啊。代碼的構(gòu)建從來都是改大于寫。

cat1.constructor; // [Function: Animal]

前文提到實(shí)例對(duì)象的constructor屬性應(yīng)該指向其構(gòu)造函數(shù)，這里直接指向了父級(jí)構(gòu)造器；在Cat構(gòu)造器內(nèi)部有一份Animal的實(shí)例屬性，在Cat.prototype上同樣有一份Animal的實(shí)例屬性，屬性重復(fù)。

3. 利用空構(gòu)造器過濾實(shí)例屬性

function Animal(name) {
  this.name = name;
  this.arr = [2,3];
};
Animal.prototype.special = "貓";

function Cat(name) { 
  Animal.apply(this, arguments);
}

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

let cat1 = new Cat("tom");
let cat2 = new Cat("mary");

cat1.constructor;

這里新建了一個(gè)空構(gòu)造器 F() 讓F.prototype = Animal.prototype，子級(jí)構(gòu)造器
Cat.prototype = new F(); 這樣在Cat.prototype中就沒有那一份Animal實(shí)例化之后的數(shù)據(jù)。再將Cat.prototype.constructor 重新指會(huì) 構(gòu)造器本身，則cat1.constructor ye的指向也沒有問題了。同時(shí)修正了Cat的原型指向。

首先感謝閱讀完全文，到這里，相信基本對(duì)于原型繼承實(shí)現(xiàn)面向?qū)ο缶幊虥]有什么問題了。之后的主要矛盾在于問題的抽象上，如何抽象合適的對(duì)象，哪些屬性和方法作為公共的，哪些作為實(shí)例的，這只有日積月累的經(jīng)驗(yàn)才能給自己最好的答案。關(guān)鍵還是在于理解了基礎(chǔ)概念，多用，多練，就會(huì)發(fā)先問題。我就是自以為理解了，但是在construtor指向上老犯糊涂，還有關(guān)于Object 與 Function，多用是加深理解的最好方式了，不妨以后再解決問題是，多考慮一下面向?qū)ο蟆?/p>

其次，不能限定自己必須使用什么，不管是黑貓還是白貓，抓住老鼠就是好貓，代碼的最終目的是為解決問題而生，同時(shí)代碼是用來讀的，不論是什么樣的編程思路，邏輯清晰，可擴(kuò)展，可復(fù)用，健壯性完好那就是好代碼。

最后的最后，文中若有錯(cuò)誤，還請(qǐng)及時(shí)指正。最后一個(gè)學(xué)習(xí)方法的分享，當(dāng)接觸一個(gè)新的知識(shí)點(diǎn)或者工具，1.先會(huì)用 知道這個(gè)東西是什么(what?) 怎么用(how?)， 2. 會(huì)用之后不妨了解一下原理看看內(nèi)部實(shí)現(xiàn)（why?)，3. 等研究的比較深刻了，自然而然對(duì)在何種情況使用(where, when)。編程學(xué)習(xí)還是要帶著問題去學(xué)習(xí)，有問題，才會(huì)記得更深刻，沒問題的兩種人，要么真的會(huì)了，要么一點(diǎn)都不會(huì)，再次感謝閱讀~~~~