摘要：命令通過(guò)構(gòu)造函數(shù)新建實(shí)例對(duì)象，實(shí)質(zhì)就是將實(shí)例對(duì)象的原型，指向構(gòu)造函數(shù)的屬性，然后在實(shí)例對(duì)象上執(zhí)行構(gòu)造函數(shù)。

大部分面向?qū)ο蟮木幊陶Z(yǔ)言，都是以“類(lèi)”（class）作為對(duì)象體系的語(yǔ)法基礎(chǔ)。JavaScript語(yǔ)言中是沒(méi)有class的概念的(ES6之前,ES6中雖然提供了class的寫(xiě)法，但實(shí)現(xiàn)原理并不是傳統(tǒng)的“類(lèi)”class概念，僅僅是一種寫(xiě)法)， 但是它依舊可以實(shí)現(xiàn)面向?qū)ο蟮木幊?，這就是通過(guò)JavaScript中的“原型對(duì)象”(prototype)來(lái)實(shí)現(xiàn)的。

請(qǐng)看這樣一個(gè)例子:

function Person(name, gender) {
    this.name = name;
    this.gender = gender;
    this.sayHello = function() {
        console.log("Hello,I am", this.name, ". I"m a", this.gender);
    };
}

這樣定義了一個(gè)構(gòu)造函數(shù)，我們創(chuàng)建對(duì)象就可以使用這個(gè)構(gòu)造函數(shù)作為模板來(lái)生成。不過(guò)以面向?qū)ο蟮乃枷雭?lái)看，不難發(fā)現(xiàn)其中的一點(diǎn)問(wèn)題:name和gender屬性是每個(gè)實(shí)例都各不相同，作為一個(gè)自身的屬性沒(méi)有問(wèn)題，而sayHello方法，每個(gè)實(shí)例對(duì)象應(yīng)該都有，而且都一樣，給每個(gè)實(shí)例對(duì)象一個(gè)全新的、完全不同(雖然代碼內(nèi)容一樣，但JavaScript中每個(gè)sayHello的值都在內(nèi)存中多帶帶存在)的sayHello方法是沒(méi)有必要的。

var zs = new Person("zhang san", "male"),
    xh = new Person("xiao hong", "female");

zs.sayHello(); // Hello,I am zhang san . I"m a male
xh.sayHello(); // Hello,I am xiao hong . I"m a female

zs.sayHello === xh.sayHello;  // false

上面代碼中展示了zs.sayHell和xh.sayHello這兩個(gè)作用相同，而且看起來(lái)代碼內(nèi)容也是完全一樣的對(duì)象，實(shí)際是兩個(gè)獨(dú)立的，互不相關(guān)的對(duì)象。

面向?qū)ο笏枷胫?，是將公共的、抽象的屬性和方法提取出?lái)，作為一個(gè)基類(lèi)，子類(lèi)繼承這個(gè)基類(lèi)，從而繼承到這些屬性和方法。而JavaScript中則可以通過(guò)prototype屬性來(lái)實(shí)現(xiàn)類(lèi)似的作用。以下是上面代碼的改進(jìn)示例:

function Person(name, gender) {
    this.name = name;
    this.gender = gender;
}
Person.prototype.sayHello = function() {
    console.log("Hello,I am", this.name, ". I"m a", this.gender);
};

var zs = new Person("zhang san", "male"),
    xh = new Person("xiao hong", "female");

zs.sayHello(); // Hello,I am zhang san . I"m a male
xh.sayHello(); // Hello,I am xiao hong . I"m a female

zs.sayHello === xh.sayHello;  // true

這時(shí)將sayHello方法定義到Person對(duì)象上的prototype屬性上，取代了在構(gòu)造函數(shù)中給每個(gè)實(shí)例對(duì)象添加sayHello方法。可以看到，其還能實(shí)現(xiàn)和之前相同的作用，而且zs.sayHell和xh.sayHello是相同的內(nèi)容，這樣就很貼近面向?qū)ο蟮乃枷肓?。那?b>zs和xh這兩個(gè)對(duì)象，是怎么訪問(wèn)到這個(gè)sayHello方法的呢？

在瀏覽器控制臺(tái)中打印出zs，將其展開(kāi)，可以看到下面的結(jié)果:

zs;
/**
 * 
Person
    gender: "male"
    name: "zhang san"
    __proto__: Object
        constructor: function Person(name, gender) 
            arguments: null
            caller: null
            length: 2 
            name: "Person"
            prototype: Object
        sayHello:function()
            arguments:null
            caller:null
            length:0
            name:""
            prototype:Object
*/

zs這個(gè)對(duì)象只有兩個(gè)自身的屬性gender和name，這和其構(gòu)造函數(shù)Person的模板相同，并且可以在Person對(duì)象的__proto__屬性下找到sayHello方法。那么這個(gè)__proto__是什么呢？它是瀏覽器環(huán)境下部署的一個(gè)對(duì)象，它指的是當(dāng)前對(duì)象的原型對(duì)象，也就是構(gòu)造函數(shù)的prototype屬性。

現(xiàn)在就可以明白了，我們給構(gòu)造函數(shù)Person對(duì)象的prototype屬性添加了sayHello方法，zs和xh這兩個(gè)通過(guò)Person構(gòu)造函數(shù)產(chǎn)生的對(duì)象，是可訪問(wèn)到Person對(duì)象的prototype屬性的，所以我們定義在prototype下的sayHello方法，Person的實(shí)例對(duì)象都可以訪問(wèn)到。

關(guān)于構(gòu)造函數(shù)的new命令原理是這樣的:

創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例

將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性

將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字

開(kāi)始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

prototype下有一個(gè)屬性constructor，默認(rèn)指向此prototype對(duì)象所在的構(gòu)造函數(shù)。

如上例中的zs下__proto__的constructor值為function Person(name, gender)。

由于此屬性定義在prototype屬性上，所以它可以在所有的實(shí)例對(duì)象中獲取到。

zs.constructor;
// function Person(name, gender) {
//     this.name = name;
//     this.gender = gender;
// }

zs.hasOwnProperty("constructor"); // false
zs.constructor === Person; // true

zs.constructor === Function; // false
zs.constructor === Object; // false

將constructor屬性放在prototype屬性中的一個(gè)作用是，可以通過(guò)這個(gè)屬性來(lái)判斷這個(gè)對(duì)象是由哪個(gè)構(gòu)造函數(shù)產(chǎn)生的，上面代碼中，zs是由Person構(gòu)造函數(shù)產(chǎn)生的，而不是Function或者Object構(gòu)造函數(shù)產(chǎn)生。

constructor屬性的另一個(gè)作用就是:提供了一種繼承的實(shí)現(xiàn)模式。

function Super() {
    // ...
}

function Sub() {
    Sub.superclass.constructor.call(this);
    // ...
}

Sub.superclass = new Super();

上面代碼中，Super和Sub都是構(gòu)造函數(shù)，在Sub內(nèi)部的this上調(diào)用Super，就會(huì)形成Sub繼承Super的效果，miniui中是這樣實(shí)現(xiàn)繼承的:

mini.Control = function(el) {    
    mini.Control.superclass.constructor.apply(this, arguments);
    // ...
}
// 其中的superclass指代父類(lèi)的prototype屬性

我們自己寫(xiě)一個(gè)例子:

// 父類(lèi)
function Animal(name) {
    this.name = name;
    this.introduce = function() {
        console.log("Hello , My name is", this.name);
    }
}
Animal.prototype.sayHello = function() {
    console.log("Hello, I am:", this.name);
}

// 子類(lèi)
function Person(name, gender) {
    Person.superclass.constructor.apply(this, arguments);
    this.gender = gender;
}
Person.superclass = new Animal();

// 子類(lèi)
function Dog(name) {
    Dog.superclass.constructor.apply(this, arguments);    
}
Dog.superclass = new Animal();

基本原理就是在子類(lèi)中使用父類(lèi)的構(gòu)造函數(shù)。在Person和Dog中均沒(méi)有對(duì)name屬性和introduce方法進(jìn)行操作，只是使用了父類(lèi)Animal的構(gòu)造函數(shù)，就可以將name屬性和introduce方法繼承來(lái)，請(qǐng)看下面例子:

var zs = new Person("zhang san", "male");

zs; // Person {name: "zhang san", gender: "male"}
zs.sayHello(); // Uncaught TypeError: zs.sayHello is not a function(…)
zs.introduce(); // Hello , My name is zhang san

var wangCai = new Dog("旺財(cái)");

wangCai; // Dog {name: "旺財(cái)"}
wangCai.introduce(); // Hello , My name is 旺財(cái)

確實(shí)實(shí)現(xiàn)了我們需要的效果?？墒俏覀儼l(fā)現(xiàn)在調(diào)用zs.sayHello()時(shí)報(bào)錯(cuò)了。為什么呢？

其實(shí)不難發(fā)現(xiàn)問(wèn)題，我們的Person.superclass是Animal的一個(gè)實(shí)例，是有sayHello方法的，但是我們?cè)?b>Perosn構(gòu)造函數(shù)的內(nèi)部，只是使用了Person.superclass.constructor。而Person.superclass.constructor指的僅僅是Animal構(gòu)造函數(shù)本身，并沒(méi)有包括Animal.prototype，所以沒(méi)有sayHello方法。

一種改進(jìn)方法是:將自定義的superclass換為prototype，即:

function Person(name, gender) {
    Person.prototype.constructor.apply(this, arguments);
    this.gender = gender;
}
Person.prototype = Animal.prototype;

var zs = new Person("zhang san", "male");
zs.sayHello(); // Hello, I am: zhang san
zs.introduce() // Hello , My name is zhang san

這樣就全部繼承到了Animal.prototype下的方法。

但是一般不要這樣做，上面寫(xiě)法中Person.prototype = Animal.prototype; 等號(hào)兩端都是一個(gè)完整的對(duì)象，進(jìn)行賦值時(shí)，Person.prototype的原對(duì)象完全被Animal.prototype替換，切斷了和之前原型鏈的聯(lián)系，而且此時(shí)Person.prototype和Animal.prototype是相同的引用，給Person.prototype 添加的屬性方法也將添加到Animal.prototype，反之亦然，這將引起邏輯混亂。

因此我們?cè)谠蜕线M(jìn)行擴(kuò)展是，通常是添加屬性，而不是替換為一個(gè)新對(duì)象。

// 好的寫(xiě)法
Person.prototype.sayHello = function() {
    console.log("Hello,I am", this.name, ". I"m a", this.gender);
};
Person.prototype. // .. 其他屬性 

// 不好的寫(xiě)法
Person.prototype = {
    sayHello:function(){
        console.log("Hello,I am", this.name, ". I"m a", this.gender);
    },
    // 其他屬性方法 ...
}

JavaScript的所有對(duì)象都有構(gòu)造函數(shù)，而所有構(gòu)造函數(shù)都有prototype屬性（其實(shí)是所有函數(shù)都有prototype屬性），所以所有對(duì)象都有自己的原型對(duì)象。

對(duì)象的屬性和方法，有可能是定義在自身，也有可能是定義在它的原型對(duì)象。由于原型本身也是對(duì)象，又有自己的原型，所以形成了一條原型鏈（prototype chain）。

zs.sayHello(); // Hello,I am zhang san . I"m a male

zs.toString(); // "[object Object]"

例如上面的zs對(duì)象，它的原型對(duì)象是Person的prototype屬性，而Person的prototype本身也是一個(gè)對(duì)象，它的原型對(duì)象是Object.prototype。

zs本身沒(méi)有sayHello方法，JavaScript通過(guò)原型鏈向上繼續(xù)尋找，在Person.prototype上找到了sayHello方法。toString方法在zs對(duì)象本身上沒(méi)有，Person.prototype上也沒(méi)有，因此繼續(xù)沿原型鏈查找，最終可以在Object.prototype上找到了toString方法。

而Object.prototype的原型指向null，由于null沒(méi)有任何屬性，因此原型鏈到Object.prototype終止，所以Object.prototype是原型鏈的最頂端。

“原型鏈”的作用是，讀取對(duì)象的某個(gè)屬性時(shí)，JavaScript引擎先尋找對(duì)象本身的屬性，如果找不到，就到它的原型去找，如果還是找不到，就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到，則返回undefined。

如果對(duì)象自身和它的原型，都定義了一個(gè)同名屬性，那么優(yōu)先讀取對(duì)象自身的屬性，這叫做“覆蓋”（overiding）。

JavaScript中通過(guò)原型鏈實(shí)現(xiàn)了類(lèi)似面向?qū)ο缶幊陶Z(yǔ)言中的繼承，我們?cè)趶?fù)制一個(gè)對(duì)象時(shí)，只用復(fù)制其自身的屬性即可，無(wú)需將整個(gè)原型鏈進(jìn)行一次復(fù)制，Object.prototype下的hasOwnProperty方法可以判斷一個(gè)屬性是否是該對(duì)象自身的屬性。

實(shí)例對(duì)象、構(gòu)造函數(shù)、prototype之間的關(guān)系可用下圖表示:

instanceof運(yùn)算符返回一個(gè)布爾值，表示指定對(duì)象是否為某個(gè)構(gòu)造函數(shù)的實(shí)例。由于原型鏈的關(guān)系，所謂的實(shí)例并不一定是某個(gè)構(gòu)造函數(shù)的直接實(shí)例，更準(zhǔn)確的描述，應(yīng)該是:返回一個(gè)后者的原型對(duì)象是否在前者的原型鏈上

zs instanceof Person; // true
zs instanceof Object ;// true 

var d = new Date();
d instanceof Date; // true
d instanceof Object; // true

hasOwnProperty()方法用來(lái)判斷某個(gè)對(duì)象是否含有指定的自身屬性。這個(gè)方法可以用來(lái)檢測(cè)一個(gè)對(duì)象是否含有特定的自身屬性，和 in 運(yùn)算符不同，該方法會(huì)忽略掉那些從原型鏈上繼承到的屬性。

zs.hasOwnProperty("name"); // true
zs.hasOwnProperty("gender"); // true

zs.hasOwnProperty("sayHello"); // fasle
Person.prototype.hasOwnProperty("sayHello"); // true 

zs.hasOwnProperty("toString"); // fasle
Object.prototype.hasOwnProperty("toString"); // true

對(duì)象實(shí)例的isPrototypeOf方法，用來(lái)判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型。

var o1 = {};
var o2 = Object.create(o1);
var o3 = Object.create(o2);

o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true

上面代碼表明，只要某個(gè)對(duì)象處在原型鏈上，isProtypeOf都返回true。

Object.prototype.isPrototypeOf({}) // true
Object.prototype.isPrototypeOf([]) // true
Object.prototype.isPrototypeOf(/xyz/) // true
Object.prototype.isPrototypeOf(Object.create(null)) // false

看起來(lái)這個(gè)方法和instanceof運(yùn)算符作用類(lèi)似，但實(shí)際使用是不一樣的。

例如:

zs instanceof Person ; // true;

Person.isPrototypeOf(zs);// false
Person.prototype.isPrototypeOf(zs); // true

zs instanceof Person可理解為判斷Person.prototype在不在zs的原型鏈上。 而Person.isPrototypeOf(zs)指的就是Person本身在不在zs的原型鏈上，所以返回false，只有Person.prototype.isPrototypeOf(zs)才為 true。

ES5Object.getPrototypeOf方法返回一個(gè)對(duì)象的原型。這是獲取原型對(duì)象的標(biāo)準(zhǔn)方法。

// 空對(duì)象的原型是Object.prototype
Object.getPrototypeOf({}) === Object.prototype
// true

// 函數(shù)的原型是Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype
// true

// f 為 F 的實(shí)例對(duì)象，則 f 的原型是 F.prototype
var f = new F();
Object.getPrototypeOf(f) === F.prototype
// true

Object.getPrototypeOf("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.getPrototypeOf("foo");
// String.prototype                  (ES6 code)

此方法是ES5方法，需要IE9+。在ES5中，參數(shù)只能是對(duì)象，否則將拋出異常，而在ES6中，此方法可正確識(shí)別原始類(lèi)型。

ES5Object.setPrototypeOf方法可以為現(xiàn)有對(duì)象設(shè)置原型，返回一個(gè)新對(duì)象。接受兩個(gè)參數(shù)，第一個(gè)是現(xiàn)有對(duì)象，第二個(gè)是原型對(duì)象。

var a = {x: 1};
var b = Object.setPrototypeOf({}, a);
// 等同于
// var b = {__proto__: a};

b.x // 1

上面代碼中，b對(duì)象是Object.setPrototypeOf方法返回的一個(gè)新對(duì)象。該對(duì)象本身為空、原型為a對(duì)象，所以b對(duì)象可以拿到a對(duì)象的所有屬性和方法。b對(duì)象本身并沒(méi)有x屬性，但是JavaScript引擎找到它的原型對(duì)象a，然后讀取a的x屬性。

new命令通過(guò)構(gòu)造函數(shù)新建實(shí)例對(duì)象，實(shí)質(zhì)就是將實(shí)例對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性，然后在實(shí)例對(duì)象上執(zhí)行構(gòu)造函數(shù)。

var F = function () {
  this.foo = "bar";
};

// var f = new F();等同于下面代碼
var f = Object.setPrototypeOf({}, F.prototype);
F.call(f);

ES5Object.create方法用于從原型對(duì)象生成新的實(shí)例對(duì)象，它接收兩個(gè)參數(shù):第一個(gè)為一個(gè)對(duì)象，新生成的對(duì)象完全繼承前者的屬性(即新生成的對(duì)象的原型此對(duì)象)；第二個(gè)參數(shù)為一個(gè)屬性描述對(duì)象，此對(duì)象的屬性將會(huì)被添加到新對(duì)象。(關(guān)于屬性描述對(duì)象可參考:MDN - Object.defineProperty())

上面代碼舉例:

var zs = new Person("zhang san", "male");

var zs_clone = Object.create(zs);

zs_clone; // {}
zs_clone.sayHello(); // Hello,I am zhang san . I"m a male
zs_clone.__proto__ === zs; // true
// Person
//     __proto__: Person
//         gender: "male"
//         name: "zhang san"
//         __proto__: Object

可以 看出 創(chuàng)建的新對(duì)象zs_clone的原型為zs，從而獲得了zs的全部屬性和方法。但是其自身屬性為空，若需要為新對(duì)象添加自身屬性，則使用第二個(gè)參數(shù)即可。

var zs_clone = Object.create(zs, {
    name: { value: "zhangsan"s clone" },
    gender: { value: "male" },
    age: { value: "25" }
});
zs_clone; // Person {name: "zhangsan"s clone", gender: "male", age: "25"}

JS中的prototype - 軒脈刃

prototype 對(duì)象 - JavaScript標(biāo)準(zhǔn)參考教程

更多可見(jiàn)JavaScript 原型鏈