摘要：相關(guān)名詞概念原型的所有對(duì)象中都包含了一個(gè)內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型的函數(shù)對(duì)象，除了原型之外，還預(yù)置了屬性當(dāng)函數(shù)對(duì)象作為構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)，該屬性值將被作為實(shí)例對(duì)象的原型。

JavaScript中除了基本類型外的數(shù)據(jù)類型，都是對(duì)象。但是由于其沒有 類（class，ES6引入了class，但只是語法糖）的概念，如何將所有對(duì)象聯(lián)系起來就成了一個(gè)問題，于是就有了原型和原型鏈的概念。

1994年，網(wǎng)景公司（Netscape）發(fā)布了Navigator瀏覽器0.9版，但是剛開始的Js沒有繼承機(jī)制，更別提像同時(shí)期興盛的C++和Java這樣擁有面向?qū)ο蟮母拍?。在?shí)際的開發(fā)過程中，工程師們發(fā)現(xiàn)沒有繼承機(jī)制很難解決一些問題，必須有一種機(jī)制能將所有的對(duì)象關(guān)聯(lián)起來。Brendan Eich鑒于以上情況，但不想把Js設(shè)計(jì)得過為復(fù)雜，于是引入了new關(guān)鍵詞和constructor構(gòu)造函數(shù)來簡(jiǎn)化對(duì)象的設(shè)計(jì)，引入了prototype函數(shù)對(duì)象來包含所有實(shí)例對(duì)象的構(gòu)造函數(shù)的屬性和方法，引入了proto和原型鏈的概念解決繼承的問題。

JavaScript的所有對(duì)象中都包含了一個(gè) [proto] 內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型

JavaScript的函數(shù)對(duì)象，除了原型 [proto] 之外，還預(yù)置了 prototype 屬性

當(dāng)函數(shù)對(duì)象作為構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)，該 prototype 屬性值將被作為實(shí)例對(duì)象的原型 [proto]。

當(dāng)一個(gè)對(duì)象調(diào)用的屬性/方法自身不存在時(shí)，就會(huì)去自己 [proto] 關(guān)聯(lián)的前輩 prototype 對(duì)象上去找

如果沒找到，就會(huì)去該 prototype 原型 [proto] 關(guān)聯(lián)的前輩 prototype 去找。依次類推，直到找到屬性/方法或 undefined 為止。從而形成了所謂的“原型鏈”

JavaScript中的對(duì)象，都有一個(gè)內(nèi)置屬性[[Prototype]]，指向這個(gè)對(duì)象的原型對(duì)象。當(dāng)查找一個(gè)屬性或方法時(shí)，如果在當(dāng)前對(duì)象中找不到定義，會(huì)繼續(xù)在當(dāng)前對(duì)象的原型對(duì)象中查找；如果原型對(duì)象中依然沒有找到，會(huì)繼續(xù)在原型對(duì)象的原型中查找（原型也是對(duì)象，也有它自己的原型）；如此繼續(xù)，直到找到為止，或者查找到最頂層的原型對(duì)象中也沒有找到，就結(jié)束查找，返回undefined?？梢钥闯?，這個(gè)查找過程是一個(gè)鏈?zhǔn)降牟檎?，每個(gè)對(duì)象都有一個(gè)到它自身原型對(duì)象的鏈接，這些鏈接組件的整個(gè)鏈條就是原型鏈。擁有相同原型的多個(gè)對(duì)象，他們的共同特征正是通過這種查找模式體現(xiàn)出來的。
在上面的查找過程，我們提到了最頂層的原型對(duì)象，這個(gè)對(duì)象就是Object.prototype，這個(gè)對(duì)象中保存了最常用的方法，如toString、valueOf、hasOwnProperty等，因此我們才能在任何對(duì)象中使用這些方法。

當(dāng)通過字面量方式創(chuàng)建對(duì)象時(shí)，它的原型就是Object.prototype。雖然我們無法直接訪問內(nèi)置屬性[[Prototype]]，但我們可以通過Object.getPrototypeOf()或?qū)ο蟮腳_proto__獲取對(duì)象的原型。

var obj = {};
Object.getPrototypeOf(obj) === Object.prototype;   // true
obj.__proto__  === Object.prototype;            // true

通過函數(shù)的構(gòu)造調(diào)用（注意，我們不把它叫做構(gòu)造函數(shù)，因?yàn)镴avaScript中同樣沒有構(gòu)造函數(shù)的概念，所有的函數(shù)都是平等的，只不過用來創(chuàng)建對(duì)象時(shí)，函數(shù)的調(diào)用方式不同而已）也是一種常用的創(chuàng)建對(duì)象的方式?；谕粋€(gè)函數(shù)創(chuàng)建出來的對(duì)象，理應(yīng)可以共享一些相同的屬性或方法，但這些屬性或方法如果放在Object.prototype里，那么所有的對(duì)象都可以使用它們了，作用域太大，顯然不合適。于是，JavaScript在定義一個(gè)函數(shù)時(shí)，同時(shí)為這個(gè)函數(shù)定義了一個(gè) 默認(rèn)的prototype屬性，所有共享的屬性或方法，都放到這個(gè)屬性所指向的對(duì)象中。由此看出，通過一個(gè)函數(shù)的構(gòu)造調(diào)用創(chuàng)建的對(duì)象，它的原型就是這個(gè)函數(shù)的prototype指向的對(duì)象。

var f = function(name) { this.name = name };
f.prototype.getName = function() { return this.name; }   //在prototype下存放所有對(duì)象的共享方法
var obj = new f("JavaScript");
obj.getName();                  // JavaScript
obj.__proto__ === f.prototype;  // true

第三種常用的創(chuàng)建對(duì)象的方式是使用Object.create()。這個(gè)方法會(huì)以你傳入的對(duì)象作為創(chuàng)建出來的對(duì)象的原型。

var obj = {};
var obj2 = Object.create(obj);
obj2.__proto__ === obj;       // true

這種方式還可以模擬對(duì)象的“繼承”行為。

function Foo(name) {
    this.name = name;
}

Foo.prototype.myName = function() {
    return this.name;
};

function Bar(name,label) {
    Foo.call( this, name );   //
    this.label = label;
}

// temp對(duì)象的原型是Foo.prototype
var temp = Object.create( Foo.prototype );  

// 通過new Bar() 創(chuàng)建的對(duì)象，其原型是temp, 而temp的原型是Foo.prototype，
// 從而兩個(gè)原型對(duì)象Bar.prototype和Foo.prototype 有了"繼承"關(guān)系
Bar.prototype = temp;

Bar.prototype.myLabel = function() {
    return this.label;
};

var a = new Bar( "a", "obj a" );

a.myName(); // "a"
a.myLabel(); // "obj a"
a.__proto__.__proto__ === Foo.prototype;  //true

這是容易混淆的兩個(gè)屬性。__proto__指向當(dāng)前對(duì)象的原型，prototype是函數(shù)才具有的屬性，默認(rèn)情況下，new 一個(gè)函數(shù)創(chuàng)建出的對(duì)象，其原型都指向這個(gè)函數(shù)的prototype屬性。

每個(gè)實(shí)例對(duì)象（object ）都有一個(gè)私有屬性（稱之為 __proto__）指向它的原型對(duì)象（prototype）。該原型對(duì)象也有一個(gè)自己的原型對(duì)象 ，層層向上直到一個(gè)對(duì)象的原型對(duì)象為 null。根據(jù)定義，null 沒有原型，并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)。

1.構(gòu)造函數(shù)綁定：使用 call 或 apply 方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上

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

實(shí)例繼承：將子對(duì)象的 prototype 指向父對(duì)象的一個(gè)實(shí)例

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

拷貝繼承：如果把父對(duì)象的所有屬性和方法，拷貝進(jìn)子對(duì)象

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

原型繼承：將子對(duì)象的 prototype 指向父對(duì)象的 prototype

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

ES6 語法糖 extends：class ColorPoint extends Point {}

   class ColorPoint extends Point {
       constructor(x, y, color) {
          super(x, y); // 調(diào)用父類的constructor(x, y)
          this.color = color;
       }
       toString() {
          return this.color + " " + super.toString(); // 調(diào)用父類的toString()
       }
    }

如有侵權(quán)，請(qǐng)聯(lián)系刪除