JavaScript 面向?qū)ο缶幊痰哪Ｊ?/h1>

目錄

本節(jié)介紹JavaScript語言實(shí)際編程中，涉及面向?qū)ο缶幊痰囊恍┠Ｊ健?/p>

讓一個(gè)構(gòu)造函數(shù)繼承另一個(gè)構(gòu)造函數(shù)，是非常常見的需求。

這可以分成兩步實(shí)現(xiàn)。第一步是在子類的構(gòu)造函數(shù)中，調(diào)用父類的構(gòu)造函數(shù)。

function Sub(value) {
  Super.call(this);
  this.prop = value;
}

上面代碼中，Sub是子類的構(gòu)造函數(shù)，this是子類的實(shí)例。在實(shí)例上調(diào)用父類的構(gòu)造函數(shù)Super，就會讓子類實(shí)例具有父類實(shí)例的屬性。

第二步，是讓子類的原型指向父類的原型，這樣子類就可以繼承父類原型。

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等于一個(gè)父類實(shí)例。

Sub.prototype = new Super();

上面這種寫法也有繼承的效果，但是子類會具有父類實(shí)例的方法。有時(shí)，這可能不是我們需要的，所以不推薦使用這種寫法。

舉例來說，下面是一個(gè)Shape構(gòu)造函數(shù)。

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構(gòu)造函數(shù)繼承Shape。

// 第一步，子類繼承父類的實(shí)例
function Rectangle() {
  Shape.call(this); // 調(diào)用父類構(gòu)造函數(shù)
}
// 另一種寫法
function Rectangle() {
  this.base = Shape;
  this.base();
}

// 第二步，子類繼承父類的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

采用這樣的寫法以后，instanceof運(yùn)算符會對子類和父類的構(gòu)造函數(shù)，都返回true。

var rect = new Rectangle();
rect.move(1, 1) // 'Shape moved.'

rect instanceof Rectangle  // true
rect instanceof Shape  // true

上面代碼中，子類是整體繼承父類。有時(shí)只需要單個(gè)方法的繼承，這時(shí)可以采用下面的寫法。

ClassB.prototype.print = function() {
  ClassA.prototype.print.call(this);
  // some code
}

上面代碼中，子類B的print方法先調(diào)用父類A的print方法，再部署自己的代碼。這就等于繼承了父類A的print方法。

JavaScript不提供多重繼承功能，即不允許一個(gè)對象同時(shí)繼承多個(gè)對象。但是，可以通過變通方法，實(shí)現(xiàn)這個(gè)功能。

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}
S.prototype = M1.prototype;

var s = new S();
s.hello // 'hello'
s.world // 'world'

上面代碼中，子類S同時(shí)繼承了父類M1和M2。當(dāng)然，從繼承鏈來看，S只有一個(gè)父類M1，但是由于在S的實(shí)例上，同時(shí)執(zhí)行M1和M2的構(gòu)造函數(shù)，所以它同時(shí)繼承了這兩個(gè)類的方法。

隨著網(wǎng)站逐漸變成”互聯(lián)網(wǎng)應(yīng)用程序”，嵌入網(wǎng)頁的JavaScript代碼越來越龐大，越來越復(fù)雜。網(wǎng)頁越來越像桌面程序，需要一個(gè)團(tuán)隊(duì)分工協(xié)作、進(jìn)度管理、單元測試等等……開發(fā)者不得不使用軟件工程的方法，管理網(wǎng)頁的業(yè)務(wù)邏輯。

JavaScript模塊化編程，已經(jīng)成為一個(gè)迫切的需求。理想情況下，開發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯，其他都可以加載別人已經(jīng)寫好的模塊。

但是，JavaScript不是一種模塊化編程語言，ES5不支持”類”（class），更遑論”模塊”（module）了。ES6正式支持”類”和”模塊”，但還沒有成為主流。JavaScript社區(qū)做了很多努力，在現(xiàn)有的運(yùn)行環(huán)境中，實(shí)現(xiàn)模塊的效果。

基本的實(shí)現(xiàn)方法

模塊是實(shí)現(xiàn)特定功能的一組屬性和方法的封裝。

只要把不同的函數(shù)（以及記錄狀態(tài)的變量）簡單地放在一起，就算是一個(gè)模塊。

function m1() {
  //...
}

function m2() {
  //...
}

上面的函數(shù)m1()和m2()，組成一個(gè)模塊。使用的時(shí)候，直接調(diào)用就行了。

這種做法的缺點(diǎn)很明顯：”污染”了全局變量，無法保證不與其他模塊發(fā)生變量名沖突，而且模塊成員之間看不出直接關(guān)系。

為了解決上面的缺點(diǎn)，可以把模塊寫成一個(gè)對象，所有的模塊成員都放到這個(gè)對象里面。

var module1 = new Object({
　_count : 0,
　m1 : function (){
　　//...
　},
　m2 : function (){
  　//...
　}
});

上面的函數(shù)m1和m2，都封裝在module1對象里。使用的時(shí)候，就是調(diào)用這個(gè)對象的屬性。

module1.m1();

但是，這樣的寫法會暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫。比如，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值。

module1._count = 5;

封裝私有變量：構(gòu)造函數(shù)的寫法

我們可以利用構(gòu)造函數(shù)，封裝私有變量。

function StringBuilder() {
  var buffer = [];

  this.add = function (str) {
     buffer.push(str);
  };

  this.toString = function () {
    return buffer.join('');
  };

}

這種方法將私有變量封裝在構(gòu)造函數(shù)中，違反了構(gòu)造函數(shù)與實(shí)例對象相分離的原則。并且，非常耗費(fèi)內(nèi)存。

function StringBuilder() {
  this._buffer = [];
}

StringBuilder.prototype = {
  constructor: StringBuilder,
  add: function (str) {
    this._buffer.push(str);
  },
  toString: function () {
    return this._buffer.join('');
  }
};

這種方法將私有變量放入實(shí)例對象中，好處是看上去更自然，但是它的私有變量可以從外部讀寫，不是很安全。

封裝私有變量：立即執(zhí)行函數(shù)的寫法

使用“立即執(zhí)行函數(shù)”（Immediately-Invoked Function Expression，IIFE），將相關(guān)的屬性和方法封裝在一個(gè)函數(shù)作用域里面，可以達(dá)到不暴露私有成員的目的。

var module1 = (function () {
　var _count = 0;
　var m1 = function () {
　  //...
　};
　var m2 = function () {
　　//...
　};
　return {
　　m1 : m1,
　　m2 : m2
　};
})();

使用上面的寫法，外部代碼無法讀取內(nèi)部的_count變量。

console.info(module1._count); //undefined

上面的module1就是JavaScript模塊的基本寫法。下面，再對這種寫法進(jìn)行加工。

模塊的放大模式

如果一個(gè)模塊很大，必須分成幾個(gè)部分，或者一個(gè)模塊需要繼承另一個(gè)模塊，這時(shí)就有必要采用“放大模式”（augmentation）。

var module1 = (function (mod){
　mod.m3 = function () {
　　//...
　};
　return mod;
})(module1);

上面的代碼為module1模塊添加了一個(gè)新方法m3()，然后返回新的module1模塊。

在瀏覽器環(huán)境中，模塊的各個(gè)部分通常都是從網(wǎng)上獲取的，有時(shí)無法知道哪個(gè)部分會先加載。如果采用上面的寫法，第一個(gè)執(zhí)行的部分有可能加載一個(gè)不存在空對象，這時(shí)就要采用”寬放大模式”（Loose augmentation）。

var module1 = ( function (mod){
　//...
　return mod;
})(window.module1 || {});

與”放大模式”相比，“寬放大模式”就是“立即執(zhí)行函數(shù)”的參數(shù)可以是空對象。

輸入全局變量

獨(dú)立性是模塊的重要特點(diǎn)，模塊內(nèi)部最好不與程序的其他部分直接交互。

為了在模塊內(nèi)部調(diào)用全局變量，必須顯式地將其他變量輸入模塊。

var module1 = (function ($, YAHOO) {
　//...
})(jQuery, YAHOO);

上面的module1模塊需要使用jQuery庫和YUI庫，就把這兩個(gè)庫（其實(shí)是兩個(gè)模塊）當(dāng)作參數(shù)輸入module1。這樣做除了保證模塊的獨(dú)立性，還使得模塊之間的依賴關(guān)系變得明顯。

立即執(zhí)行函數(shù)還可以起到命名空間的作用。

(function($, window, document) {

  function go(num) {
  }

  function handleEvents() {
  }

  function initialize() {
  }

  function dieCarouselDie() {
  }

  //attach to the global scope
  window.finalCarousel = {
    init : initialize,
    destroy : dieCouraselDie
  }

})( jQuery, window, document );

上面代碼中，finalCarousel對象輸出到全局，對外暴露init和destroy接口，內(nèi)部方法go、handleEvents、initialize、dieCarouselDie都是外部無法調(diào)用的。

• JavaScript Modules: A Beginner’s Guide, by Preethi Kasireddy