原型對象概述
構造函數的缺點
JavaScript 通過構造函數生成新對象,因此構造函數可以視爲對象的模板。實例對象的屬性和方法,可以定義在構造函數內部。
function Cat (name, color) {
this.name = name;
this.color = color;
}
var cat1 = new Cat('大毛', '白色');
cat1.name // '大毛'
cat1.color // '白色'
上面代碼中,Cat
函數是一個構造函數,函數內部定義了name
屬性和color
屬性,所有實例對象(上例是cat1
)都會生成這兩個屬性,即這兩個屬性會定義在實例對象上面。
通過構造函數爲實例對象定義屬性,雖然很方便,但是有一個缺點。同一個構造函數的多個實例之間,無法共享屬性,從而造成對系統資源的浪費。
function Cat(name, color) {
this.name = name;
this.color = color;
this.meow = function () {
console.log('喵喵');
};
}
var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');
cat1.meow === cat2.meow
// false
上面代碼中,cat1
和cat2
是同一個構造函數的兩個實例,它們都具有meow
方法。由於meow
方法是生成在每個實例對象上面,所以兩個實例就生成了兩次。也就是說,每新建一個實例,就會新建一個meow
方法。這既沒有必要,又浪費系統資源,因爲所有meow
方法都是同樣的行爲,完全應該共享。
這個問題的解決方法,就是 JavaScript 的原型對象(prototype)。
prototype 屬性的作用
JavaScript 繼承機制的設計思想就是,原型對象的所有屬性和方法,都能被實例對象共享。也就是說,如果屬性和方法定義在原型上,那麼所有實例對象就能共享,不僅節省了內存,還體現了實例對象之間的聯繫。
下面,先看怎麼爲對象指定原型。JavaScript 規定,每個函數都有一個prototype
屬性,指向一個對象。
function f() {}
typeof f.prototype // "object"
上面代碼中,函數f
默認具有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
屬性。也就是說,當實例對象本身沒有某個屬性或方法的時候,它會到原型對象去尋找該屬性或方法。這就是原型對象的特殊之處。
如果實例對象自身就有某個屬性或方法,它就不會再去原型對象尋找這個屬性或方法。
cat1.color = 'black';
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 chain):對象到原型,再到原型的原型……
如果一層層地上溯,所有對象的原型最終都可以上溯到Object.prototype
,即Object
構造函數的prototype
屬性。也就是說,所有對象都繼承了Object.prototype
的屬性。這就是所有對象都有valueOf
和toString
方法的原因,因爲這是從Object.prototype
繼承的。
那麼,Object.prototype
對象有沒有它的原型呢?回答是Object.prototype
的原型是null
。null
沒有任何屬性和方法,也沒有自己的原型。因此,原型鏈的盡頭就是null
。
Object.getPrototypeOf(Object.prototype)
// null
上面代碼表示,Object.prototype
對象的原型是null
,由於null
沒有任何屬性,所以原型鏈到此爲止。Object.getPrototypeOf
方法返回參數對象的原型,具體介紹請看後文。
讀取對象的某個屬性時,JavaScript 引擎先尋找對象本身的屬性,如果找不到,就到它的原型去找,如果還是找不到,就到原型的原型去找。如果直到最頂層的Object.prototype
還是找不到,則返回undefined
。如果對象自身和它的原型,都定義了一個同名屬性,那麼優先讀取對象自身的屬性,這叫做“覆蓋”(overriding)。
注意,一級級向上,在整個原型鏈上尋找某個屬性,對性能是有影響的。所尋找的屬性在越上層的原型對象,對性能的影響越大。如果尋找某個不存在的屬性,將會遍歷整個原型鏈。
舉例來說,如果讓構造函數的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
表達式,用來比較一個對象是否爲某個構造函數的實例,結果就是證明mine
爲Array
的實例,instanceof
運算符的詳細解釋詳見後文。
上面代碼還出現了原型對象的contructor
屬性,這個屬性的含義下一節就來解釋。
constructor 屬性
prototype
對象有一個constructor
屬性,默認指向prototype
對象所在的構造函數。
function P() {}
P.prototype.constructor === P // true
由於constructor
屬性定義在prototype
對象上面,意味着可以被所有實例對象繼承。
function P() {}
var p = new P();
p.constructor === P // true
p.constructor === P.prototype.constructor // true
p.hasOwnProperty('constructor') // false
上面代碼中,p
是構造函數P
的實例對象,但是p
自身沒有constructor
屬性,該屬性其實是讀取原型鏈上面的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();
};
上面代碼中,createCopy
方法調用構造函數,新建另一個實例。
constructor
屬性表示原型對象與構造函數之間的關聯關係,如果修改了原型對象,一般會同時修改constructor
屬性,防止引用的時候出錯。
function Person(name) {
this.name = name;
}
Person.prototype.constructor === Person // true
Person.prototype = {
method: function () {}
};
Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true
上面代碼中,構造函數Person
的原型對象改掉了,但是沒有修改constructor
屬性,導致這個屬性不再指向Person
。由於Person
的新原型是一個普通對象,而普通對象的contructor
屬性指向Object
構造函數,導致Person.prototype.constructor
變成了Object
。
所以,修改原型對象時,一般要同時修改constructor
屬性的指向。
// 壞的寫法
C.prototype = {
method1: function (...) { ... },
// ...
};
// 好的寫法
C.prototype = {
constructor: C,
method1: function (...) { ... },
// ...
};
// 更好的寫法
C.prototype.method1 = function (...) { ... };
上面代碼中,要麼將constructor
屬性重新指向原來的構造函數,要麼只在原型對象上添加方法,這樣可以保證instanceof
運算符不會失真。
如果不能確定constructor
屬性是什麼函數,還有一個辦法:通過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
運算符的左邊是實例對象,右邊是構造函數。它會檢查右邊構建函數的原型對象(prototype),是否在左邊對象的原型鏈上。因此,下面兩種寫法是等價的。
v instanceof Vehicle
// 等同於
Vehicle.prototype.isPrototypeOf(v)
上面代碼中,Object.prototype.isPrototypeOf
的詳細解釋見後文。
由於instanceof
檢查整個原型鏈,因此同一個實例對象,可能會對多個構造函數都返回true
。
var d = new Date();
d instanceof Date // true
d instanceof Object // true
上面代碼中,d
同時是Date
和Object
的實例,因此對這兩個構造函數都返回true
。
instanceof
的原理是檢查右邊構造函數的prototype
屬性,是否在左邊對象的原型鏈上。有一種特殊情況,就是左邊對象的原型鏈上,只有null
對象。這時,instanceof
判斷會失真。
var obj = Object.create(null);
typeof obj // "object"
Object.create(null) instanceof Object // false
上面代碼中,Object.create(null)
返回一個新對象obj
,它的原型是null
(Object.create
的詳細介紹見後文)。右邊的構造函數Object
的prototype
屬性,不在左邊的原型鏈上,因此instanceof
就認爲obj
不是Object
的實例。但是,只要一個對象的原型不是null
,instanceof
運算符的判斷就不會失真。
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
命令。
構造函數的繼承
讓一個構造函數繼承另一個構造函數,是非常常見的需求。這可以分成兩步實現。第一步是在子類的構造函數中,調用父類的構造函數。
function Sub(value) {
Super.call(this);
this.prop = value;
}
上面代碼中,Sub
是子類的構造函數,this
是子類的實例。在實例上調用父類的構造函數Super
,就會讓子類實例具有父類實例的屬性。
第二步,是讓子類的原型指向父類的原型,這樣子類就可以繼承父類原型。
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.method = '...';
上面代碼中,Sub.prototype
是子類的原型,要將它賦值爲Object.create(Super.prototype)
,而不是直接等於Super.prototype
。否則後面兩行對Sub.prototype
的操作,會連父類的原型Super.prototype
一起修改掉。
另外一種寫法是Sub.prototype
等於一個父類實例。
Sub.prototype = new Super();
上面這種寫法也有繼承的效果,但是子類會具有父類實例的方法。有時,這可能不是我們需要的,所以不推薦使用這種寫法。
舉例來說,下面是一個Shape
構造函數。
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function (x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};
我們需要讓Rectangle
構造函數繼承Shape
。
// 第一步,子類繼承父類的實例
function Rectangle() {
Shape.call(this); // 調用父類構造函數
}
// 另一種寫法
function Rectangle() {
this.base = Shape;
this.base();
}
// 第二步,子類繼承父類的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
採用這樣的寫法以後,instanceof
運算符會對子類和父類的構造函數,都返回true
。
var rect = new Rectangle();
rect instanceof Rectangle // true
rect instanceof Shape // true
上面代碼中,子類是整體繼承父類。有時只需要單個方法的繼承,這時可以採用下面的寫法。
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
// some code
}
上面代碼中,子類B
的print
方法先調用父類A
的print
方法,再部署自己的代碼。這就等於繼承了父類A
的print
方法。
多重繼承
JavaScript 不提供多重繼承功能,即不允許一個對象同時繼承多個對象。但是,可以通過變通方法,實現這個功能。
function M1() {
this.hello = 'hello';
}
function M2() {
this.world = 'world';
}
function S() {
M1.call(this);
M2.call(this);
}
// 繼承 M1
S.prototype = Object.create(M1.prototype);
// 繼承鏈上加入 M2
Object.assign(S.prototype, M2.prototype);
// 指定構造函數
S.prototype.constructor = S;
var s = new S();
s.hello // 'hello'
s.world // 'world'
上面代碼中,子類S
同時繼承了父類M1
和M2
。這種模式又稱爲 Mixin(混入)。
模塊
隨着網站逐漸變成“互聯網應用程序”,嵌入網頁的 JavaScript 代碼越來越龐大,越來越複雜。網頁越來越像桌面程序,需要一個團隊分工協作、進度管理、單元測試等等……開發者必須使用軟件工程的方法,管理網頁的業務邏輯。
JavaScript 模塊化編程,已經成爲一個迫切的需求。理想情況下,開發者只需要實現核心的業務邏輯,其他都可以加載別人已經寫好的模塊。
但是,JavaScript 不是一種模塊化編程語言,ES6 纔開始支持“類”和“模塊”。下面介紹傳統的做法,如何利用對象實現模塊的效果。
基本的實現方法
模塊是實現特定功能的一組屬性和方法的封裝。
簡單的做法是把模塊寫成一個對象,所有的模塊成員都放到這個對象裏面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函數m1
和m2
,都封裝在module1
對象裏。使用的時候,就是調用這個對象的屬性。
module1.m1();
但是,這樣的寫法會暴露所有模塊成員,內部狀態可以被外部改寫。比如,外部代碼可以直接改變內部計數器的值。
module1._count = 5;
封裝私有變量:構造函數的寫法
我們可以利用構造函數,封裝私有變量。
function StringBuilder() {
var buffer = [];
this.add = function (str) {
buffer.push(str);
};
this.toString = function () {
return buffer.join('');
};
}
上面代碼中,buffer
是模塊的私有變量。一旦生成實例對象,外部是無法直接訪問buffer
的。但是,這種方法將私有變量封裝在構造函數中,導致構造函數與實例對象是一體的,總是存在於內存之中,無法在使用完成後清除。這意味着,構造函數有雙重作用,既用來塑造實例對象,又用來保存實例對象的數據,違背了構造函數與實例對象在數據上相分離的原則(即實例對象的數據,不應該保存在實例對象以外)。同時,非常耗費內存。
function StringBuilder() {
this._buffer = [];
}
StringBuilder.prototype = {
constructor: StringBuilder,
add: function (str) {
this._buffer.push(str);
},
toString: function () {
return this._buffer.join('');
}
};
這種方法將私有變量放入實例對象中,好處是看上去更自然,但是它的私有變量可以從外部讀寫,不是很安全。
封裝私有變量:立即執行函數的寫法
另一種做法是使用“立即執行函數”(Immediately-Invoked Function Expression,IIFE),將相關的屬性和方法封裝在一個函數作用域裏面,可以達到不暴露私有成員的目的。
var module1 = (function () {
var _count = 0;
var m1 = function () {
//...
};
var m2 = function () {
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的寫法,外部代碼無法讀取內部的_count
變量。
console.info(module1._count); //undefined
上面的module1
就是 JavaScript 模塊的基本寫法。下面,再對這種寫法進行加工。
模塊的放大模式
如果一個模塊很大,必須分成幾個部分,或者一個模塊需要繼承另一個模塊,這時就有必要採用“放大模式”(augmentation)。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代碼爲module1
模塊添加了一個新方法m3()
,然後返回新的module1
模塊。
在瀏覽器環境中,模塊的各個部分通常都是從網上獲取的,有時無法知道哪個部分會先加載。如果採用上面的寫法,第一個執行的部分有可能加載一個不存在空對象,這時就要採用"寬放大模式"(Loose augmentation)。
var module1 = (function (mod) {
//...
return mod;
})(window.module1 || {});
與"放大模式"相比,“寬放大模式”就是“立即執行函數”的參數可以是空對象。
輸入全局變量
獨立性是模塊的重要特點,模塊內部最好不與程序的其他部分直接交互。
爲了在模塊內部調用全局變量,必須顯式地將其他變量輸入模塊。
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
上面的module1
模塊需要使用 jQuery 庫和 YUI 庫,就把這兩個庫(其實是兩個模塊)當作參數輸入module1
。這樣做除了保證模塊的獨立性,還使得模塊之間的依賴關係變得明顯。
立即執行函數還可以起到命名空間的作用。
(function($, window, document) {
function go(num) {
}
function handleEvents() {
}
function initialize() {
}
function dieCarouselDie() {
}
//attach to the global scope
window.finalCarousel = {
init : initialize,
destroy : dieCarouselDie
}
})( jQuery, window, document );
上面代碼中,finalCarousel
對象輸出到全局,對外暴露init
和destroy
接口,內部方法go
、handleEvents
、initialize
、dieCarouselDie
都是外部無法調用的。