JS面向對像編程四—— prototype 對象

大部分面向對象的編程語言，都是以“類”（class）作爲對象體系的語法基礎。JavaScript語言不是如此，它的面向對象編程基於“原型對象”。

概述

構造函數的缺點

JavaScript通過構造函數生成新對象，因此構造函數可以視爲對象的模板。實例對象的屬性和方法，可以定義在構造函數內部。

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

var cat1 = new Cat('大毛', '白色');

cat1.name // '大毛'
cat1.color // '白色'

上面代碼的Cat函數是一個構造函數，函數內部定義了name屬性和color屬性，所有實例對象都會生成這兩個屬性。但是，這樣做是對系統資源的浪費，因爲同一個構造函數的對象實例之間，無法共享屬性。

function Cat(name, color) {
  this.name = name;
  this.color = color;
  this.meow = function () {
    console.log('mew, mew, mew...');
  };
}

var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');

cat1.meow === cat2.meow
// false

上面代碼中，cat1和cat2是同一個構造函數的實例。但是，它們的meow方法是不一樣的，就是說每新建一個實例，就會新建一個meow方法。這既沒有必要，又浪費系統資源，因爲所有meow方法都是同樣的行爲，完全應該共享。

prototype屬性的作用

JavaScript的每個對象都繼承另一個對象，後者稱爲“原型”（prototype）對象。只有null除外，它沒有自己的原型對象。

原型對象上的所有屬性和方法，都能被派生對象共享。這就是JavaScript繼承機制的基本設計。

通過構造函數生成實例對象時，會自動爲實例對象分配原型對象。每一個構造函數都有一個prototype屬性，這個屬性就是實例對象的原型對象。

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

Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

上面代碼中，構造函數Animal的prototype對象，就是實例對象cat1和cat2的原型對象。在原型對象上添加一個color屬性。結果，實例對象都能讀取該屬性。

原型對象的屬性不是實例對象自身的屬性。只要修改原型對象，變動就立刻會體現在所有實例對象上。

Animal.prototype.color = 'yellow';

cat1.color // "yellow"
cat2.color // "yellow"

上面代碼中，原型對象的color屬性的值變爲yellow，兩個實例對象的color屬性立刻跟着變了。這是因爲實例對象其實沒有color屬性，都是讀取原型對象的color屬性。也就是說，當實例對象本身沒有某個屬性或方法的時候，它會到構造函數的prototype屬性指向的對象，去尋找該屬性或方法。這就是原型對象的特殊之處。

如果實例對象自身就有某個屬性或方法，它就不會再去原型對象尋找這個屬性或方法。

cat1.color = 'black';

cat2.color // 'yellow'
Animal.prototype.color // "yellow";

上面代碼中，實例對象cat1的color屬性改爲black，就使得它不再去原型對象讀取color屬性，後者的值依然爲yellow。

總結一下，原型對象的作用，就是定義所有實例對象共享的屬性和方法。這也是它被稱爲原型對象的含義，而實例對象可以視作從原型對象衍生出來的子對象。

Animal.prototype.walk = function () {
  console.log(this.name + ' is walking');
};

上面代碼中，Animal.prototype對象上面定義了一個walk方法，這個方法將可以在所有Animal實例對象上面調用。

由於JavaScript的所有對象都有構造函數，而所有構造函數都有prototype屬性（其實是所有函數都有prototype屬性），所以所有對象都有自己的原型對象。

原型鏈

對象的屬性和方法，有可能是定義在自身，也有可能是定義在它的原型對象。由於原型本身也是對象，又有自己的原型，所以形成了一條原型鏈（prototype chain）。比如，a對象是b對象的原型，b對象是c對象的原型，以此類推。

如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構造函數的prototype屬性指向的那個對象。那麼，Object.prototype對象有沒有它的原型呢？回答可以是有的，就是沒有任何屬性和方法的null對象，而null對象沒有自己的原型。

Object.getPrototypeOf(Object.prototype)
// null

上面代碼表示，Object.prototype對象的原型是null，由於null沒有任何屬性，所以原型鏈到此爲止。

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

如果對象自身和它的原型，都定義了一個同名屬性，那麼優先讀取對象自身的屬性，這叫做“覆蓋”（overiding）。

需要注意的是，一級級向上，在原型鏈尋找某個屬性，對性能是有影響的。所尋找的屬性在越上層的原型對象，對性能的影響越大。如果尋找某個不存在的屬性，將會遍歷整個原型鏈。

舉例來說，如果讓某個函數的prototype屬性指向一個數組，就意味着該函數可以當作數組的構造函數，因爲它生成的實例對象都可以通過prototype屬性調用數組方法。

var MyArray = function () {};

MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;

var mine = new MyArray();
mine.push(1, 2, 3);

mine.length // 3
mine instanceof Array // true

上面代碼中，mine是構造函數MyArray的實例對象，由於MyArray的prototype屬性指向一個數組實例，使得mine可以調用數組方法（這些方法定義在數組實例的prototype對象上面）。至於最後那行instanceof表達式，我們知道instanceof運算符用來比較一個對象是否爲某個構造函數的實例，最後一行就表示mine爲Array的實例。

下面的代碼可以找出，某個屬性到底是原型鏈上哪個對象自身的屬性。

function getDefiningObject(obj, propKey) {
  while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
    obj = Object.getPrototypeOf(obj);
  }
  return obj;
}

constructor屬性

prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數。

function P() {}

P.prototype.constructor === P
// true

由於constructor屬性定義在prototype對象上面，意味着可以被所有實例對象繼承。

function P() {}
var p = new P();

p.constructor
// function P() {}

p.constructor === P.prototype.constructor
// true

p.hasOwnProperty('constructor')
// false

上面代碼中，p是構造函數P的實例對象，但是p自身沒有contructor屬性，該屬性其實是讀取原型鏈上面的P.prototype.constructor屬性。

constructor屬性的作用，是分辨原型對象到底屬於哪個構造函數。

function F() {};
var f = new F();

f.constructor === F // true
f.constructor === RegExp // false

上面代碼表示，使用constructor屬性，確定實例對象f的構造函數是F，而不是RegExp。

有了constructor屬性，就可以從實例新建另一個實例。

function Constr() {}
var x = new Constr();

var y = new x.constructor();
y instanceof Constr // true

上面代碼中，x是構造函數Constr的實例，可以從x.constructor間接調用構造函數。

這使得在實例方法中，調用自身的構造函數成爲可能。

Constr.prototype.createCopy = function () {
  return new this.constructor();
};

這也提供了繼承模式的一種實現。

function Super() {}

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

Sub.superclass = new Super();

上面代碼中，Super和Sub都是構造函數，在Sub內部的this上調用Super，就會形成Sub繼承Super的效果。

由於constructor屬性是一種原型對象與構造函數的關聯關係，所以修改原型對象的時候，務必要小心。

function A() {}
var a = new A();
a instanceof A // true

function B() {}
A.prototype = B.prototype;
a instanceof A // false

上面代碼中，a是A的實例。修改了A.prototype以後，constructor屬性的指向就變了，導致instanceof運算符失真。

所以，修改原型對象時，一般要同時校正constructor屬性的指向。

// 避免這種寫法
C.prototype = {
  method1: function (...) { ... },
  // ...
};

// 較好的寫法
C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 好的寫法
C.prototype.method1 = function (...) { ... };

上面代碼中，避免完全覆蓋掉原來的prototype屬性，要麼將constructor屬性重新指向原來的構造函數，要麼只在原型對象上添加方法，這樣可以保證instanceof運算符不會失真。

此外，通過name屬性，可以從實例得到構造函數的名稱。

function Foo() {}
var f = new Foo();
f.constructor.name // "Foo"

instanceof運算符

instanceof運算符返回一個布爾值，表示指定對象是否爲某個構造函數的實例。

var v = new Vehicle();
v instanceof Vehicle // true

上面代碼中，對象v是構造函數Vehicle的實例，所以返回true。

instanceof運算符的左邊是實例對象，右邊是構造函數。它的運算實質是檢查右邊構建函數的原型對象，是否在左邊對象的原型鏈上。因此，下面兩種寫法是等價的。

v instanceof Vehicle
// 等同於
Vehicle.prototype.isPrototypeOf(v)

由於instanceof對整個原型鏈上的對象都有效，因此同一個實例對象，可能會對多個構造函數都返回true。

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

上面代碼中，d同時是Date和Object的實例，因此對這兩個構造函數都返回true。

instanceof的原理是檢查原型鏈，對於那些不存在原型鏈的對象，就無法判斷。

Object.create(null) instanceof Object // false

上面代碼中，Object.create(null)返回的新對象的原型是null，即不存在原型，因此instanceof就認爲該對象不是Object的實例。

除了上面這種繼承null的特殊情況，JavaScript之中，只要是對象，就有對應的構造函數。因此，instanceof運算符的一個用處，是判斷值的類型。

var x = [1, 2, 3];
var y = {};
x instanceof Array // true
y instanceof Object // true

上面代碼中，instanceof運算符判斷，變量x是數組，變量y是對象。

注意，instanceof運算符只能用於對象，不適用原始類型的值。

var s = 'hello';
s instanceof String // false

上面代碼中，字符串不是String對象的實例（因爲字符串不是對象），所以返回false。

此外，undefined和null不是對象，所以instanceOf運算符總是返回false。

undefined instanceof Object // false
null instanceof Object // false

利用instanceof運算符，還可以巧妙地解決，調用構造函數時，忘了加new命令的問題。

function Fubar (foo, bar) {
  if (this instanceof Fubar) {
    this._foo = foo;
    this._bar = bar;
  }
  else {
    return new Fubar(foo, bar);
  }
}

上面代碼使用instanceof運算符，在函數體內部判斷this關鍵字是否爲構造函數Fubar的實例。如果不是，就表明忘了加new命令。

Object.getPrototypeOf()

Object.getPrototypeOf方法返回一個對象的原型。這是獲取原型對象的標準方法。

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

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

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

Object.setPrototypeOf()

Object.setPrototypeOf方法可以爲現有對象設置原型，返回一個新對象。

Object.setPrototypeOf方法接受兩個參數，第一個是現有對象，第二個是原型對象。

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

b.x // 1

上面代碼中，b對象是Object.setPrototypeOf方法返回的一個新對象。該對象本身爲空、原型爲a對象，所以b對象可以拿到a對象的所有屬性和方法。b對象本身並沒有x屬性，但是JavaScript引擎找到它的原型對象a，然後讀取a的x屬性。

new命令通過構造函數新建實例對象，實質就是將實例對象的原型，指向構造函數的prototype屬性，然後在實例對象上執行構造函數。

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

var f = new F();

// 等同於
var f = Object.setPrototypeOf({}, F.prototype);
F.call(f);

Object.create()

Object.create方法用於從原型對象生成新的實例對象，可以替代new命令。

它接受一個對象作爲參數，返回一個新對象，後者完全繼承前者的屬性，即原有對象成爲新對象的原型。

var A = {
 print: function () {
   console.log('hello');
 }
};

var B = Object.create(A);

B.print() // hello
B.print === A.print // true

上面代碼中，Object.create方法在A的基礎上生成了B。此時，A就成了B的原型，B就繼承了A的所有屬性和方法。這段代碼等同於下面的代碼。

var A = function () {};
A.prototype = {
 print: function () {
   console.log('hello');
 }
};

var B = new A();

B.print === A.prototype.print // true

實際上，Object.create方法可以用下面的代碼代替。如果老式瀏覽器不支持Object.create方法，可以就用這段代碼自己部署。

if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}

上面代碼表示，Object.create方法實質是新建一個構造函數F，然後讓F的prototype屬性指向作爲原型的對象o，最後返回一個F的實例，從而實現讓實例繼承o的屬性。

下面三種方式生成的新對象是等價的。

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

如果想要生成一個不繼承任何屬性（比如沒有toString和valueOf方法）的對象，可以將Object.create的參數設爲null。

var o = Object.create(null);

o.valueOf()
// TypeError: Object [object Object] has no method 'valueOf'

上面代碼表示，如果對象o的原型是null，它就不具備一些定義在Object.prototype對象上面的屬性，比如valueOf方法。

使用Object.create方法的時候，必須提供對象原型，否則會報錯。

Object.create()
// TypeError: Object prototype may only be an Object or null

object.create方法生成的新對象，動態繼承了原型。在原型上添加或修改任何方法，會立刻反映在新對象之上。

var o1 = { p: 1 };
var o2 = Object.create(o1);

o1.p = 2;
o2.p
// 2

上面代碼表示，修改對象原型會影響到新生成的對象。

除了對象的原型，Object.create方法還可以接受第二個參數。該參數是一個屬性描述對象，它所描述的對象屬性，會添加到新對象。

var o = Object.create({}, {
  p1: { value: 123, enumerable: true },
  p2: { value: 'abc', enumerable: true }
});

// 等同於
var o = Object.create({});
o.p1 = 123;
o.p2 = 'abc';

Object.create方法生成的對象，繼承了它的原型對象的構造函數。

function A() {}
var a = new A();
var b = Object.create(a);

b.constructor === A // true
b instanceof A // true

上面代碼中，b對象的原型是a對象，因此繼承了a對象的構造函數A。

Object.prototype.isPrototypeOf()

對象實例的isPrototypeOf方法，用來判斷一個對象是否是另一個對象的原型。

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

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

上面代碼表明，只要某個對象處在原型鏈上，isPrototypeOf都返回true。

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

上面代碼中，由於Object.prototype處於原型鏈的最頂端，所以對各種實例都返回true，只有繼承null的對象除外。

Object.prototype.__proto__

__proto__屬性（前後各兩個下劃線）可以改寫某個對象的原型對象。

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

上面代碼通過__proto__屬性，將p對象設爲obj對象的原型。

根據語言標準，__proto__屬性只有瀏覽器才需要部署，其他環境可以沒有這個屬性，而且前後的兩根下劃線，表示它本質是一個內部屬性，不應該對使用者暴露。因此，應該儘量少用這個屬性，而是用Object.getPrototypeof()（讀取）和Object.setPrototypeOf()（設置），進行原型對象的讀寫操作。

原型鏈可以用__proto__很直觀地表示。

var A = {
  name: '張三'
};
var B = {
  name: '李四'
};

var proto = {
  print: function () {
    console.log(this.name);
  }
};

A.__proto__ = proto;
B.__proto__ = proto;

A.print() // 張三
B.print() // 李四

上面代碼中，A對象和B對象的原型都是proto對象，它們都共享proto對象的print方法。也就是說，A和B的print方法，都是在調用proto對象的print方法。

A.print === B.print // true
A.print === proto.print // true
B.print === proto.print // true

可以使用Object.getPrototypeOf方法，檢查瀏覽器是否支持__proto__屬性，老式瀏覽器不支持這個屬性。

Object.getPrototypeOf({ __proto__: null }) === null

上面代碼將一個對象的__proto__屬性設爲null，然後使用Object.getPrototypeOf方法獲取這個對象的原型，判斷是否等於null。如果當前環境支持__proto__屬性，兩者的比較結果應該是true。

獲取原型對象方法的比較

如前所述，__proto__屬性指向當前對象的原型對象，即構造函數的prototype屬性。

var obj = new Object();

obj.__proto__ === Object.prototype
// true
obj.__proto__ === obj.constructor.prototype
// true

上面代碼首先新建了一個對象obj，它的__proto__屬性，指向構造函數（Object或obj.constructor）的prototype屬性。所以，兩者比較以後，返回true。

因此，獲取實例對象obj的原型對象，有三種方法。

• obj.__proto__
• obj.constructor.prototype
• Object.getPrototypeOf(obj)

上面三種方法之中，前兩種都不是很可靠。最新的ES6標準規定，__proto__屬性只有瀏覽器才需要部署，其他環境可以不部署。而obj.constructor.prototype在手動改變原型對象時，可能會失效。

var P = function () {};
var p = new P();

var C = function () {};
C.prototype = p;
var c = new C();

c.constructor.prototype === p // false

上面代碼中，C構造函數的原型對象被改成了p，結果c.constructor.prototype就失真了。所以，在改變原型對象時，一般要同時設置constructor屬性。

C.prototype = p;
C.prototype.constructor = C;

c.constructor.prototype === p // true

所以，推薦使用第三種Object.getPrototypeOf方法，獲取原型對象。

var o = new Object();
Object.getPrototypeOf(o) === Object.prototype
// true