javascript設計模式與開發實踐（二）- 封裝和原型模式

封裝

封裝數據

在許多語言的對象系統中，封裝數據是由語法解析來實現的，這些語言也許提供了 private、
public、protected 等關鍵字來提供不一樣的訪問權限。例如：java

但在js裏面，並無提供這些關鍵字的支持，咱們只能經過做用域來模擬實現封裝性。（ES6 let除外）

var myTest = (function() {
    var _name ='jason';
    return {
        getName: function(){
            return _name;
        }
    }
})()
console.log(myTest.getName()); // 輸出：jason
console.log(_name); // 輸出：_name is not defined

這裏，咱們定義了一個自執行函數（什麼叫自執行函數？參考這篇文章），函數內部定義了一個變量_name，函數return一個對象出去（也叫模塊模式），向外部暴露了一個getName函數，這裏的_name變量就被封裝在了myTest函數內部。

上文說的是封裝數據，在js裏，不光數據能夠封裝，還能夠封裝實現、封裝類型，封裝變化等，封裝使得對象之間的耦合變得鬆散，對象之間只經過暴露的 API 接口來通訊。

原型模式和基於原型繼承的JavaScript對象系統

在java中，對象必須由類建立而來，而在js中，對象倒是經過原型繼承的方式得來的，在原型編程的思想中，類並非必需的，對象未必須要從類中建立而來， 一個對象是經過克隆另一個對象所獲得的。

原型模式不單是一種設計模式，也被稱爲一種編程泛型。

使用克隆的原型模式

從設計模式的角度講，原型模式是用於建立對象的一種模式，若是咱們想要建立一個對象， 一種方法是先指定它的類型，而後經過類來建立這個對象。原型模式選擇了另一種方式，咱們 再也不關心對象的具體類型，而是找到一個對象，而後經過克隆來建立一個如出一轍的對象。
原型模式的實現關鍵，是語言自己是否提供了 clone 方法。ECMAScript 5 提供了 Object.create 方法，能夠用來克隆對象。代碼以下:

var Plane = function(){ 
    this.blood = 100;
    this.attackLevel = 1;
    this.defenseLevel = 1;
};
var plane = new Plane();
plane.blood = 500;
plane.attackLevel = 10;
plane.defenseLevel = 7;
var clonePlane = Object.create( plane );
console.log( clonePlane ); // 輸出:Object {blood: 500, attackLevel: 10,defenseLevel: 7}

在不支持 Object.create 方法的瀏覽器中，則可使用如下代碼:

Object.create = Object.create || function( obj ){
    var F = function(){};
    F.prototype = obj;
    return new F(); 
}

原型編程範型的一些規則

• 全部的數據都是對象。
• 要獲得一個對象，不是經過實例化類，而是找到一個對象做爲原型並克隆它。
• 對象會記住它的原型。
• 若是對象沒法響應某個請求，它會把這個請求委託給它本身的原型。

JavaScript中的原型繼承

這裏咱們來根據上面的範式來整理一下js中遵循的規則

全部的數據都是對象

在js中，除了undefined以外，全部數據都是對象，number、boolean、string 這幾種基本類型數據也能夠經過「包裝類」的方式變成對象類型數據來處理。那麼根據原型規則，這些對象必定有個根對象，這個對象就是Object.prototype，Object.prototype 對象是一個空的 對象。咱們在 JavaScript 遇到的每一個對象，實際上都是從 Object.prototype 對象克隆而來的， Object.prototype 對象就是它們的原型。

var obj1 = new Object();
var obj2 = {};

console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 輸出:true
console.log( Object.getPrototypeOf( obj2 ) === Object.prototype ); // 輸出:true

要獲得一個對象，不是經過實例化類，而是找到一個對象做爲原型並克隆它

js中克隆是引擎內部實現的，咱們不用去關心他是如何實現的，咱們只要知道使用var obj1 = new Object()或者var obj2 = {}，引擎就會從Object.prototype克隆一個對象出來。

接下來咱們看看如何使用new運算符獲得一個對象

var Person = function(name) {
    this.name = name;
    this.getName = function() {
        return this.name;
    }
}

var p = new Person('jason');

console.log(p.name);
console.log(p.getName());
console.log(Object.getPrototypeOf(p) === Person.prototype); // 輸出true

在 JavaScript 中沒有類的概念，這句話咱們已經重複過不少次了。但剛纔不是明明調用了newPerson()嗎?

*在這裏 Person 並非類，而是函數構造器，JavaScript 的函數既能夠做爲普通函數被調用， 7 也能夠做爲構造器被調用。當使用 new 運算符來調用函數時，此時的函數就是一個構造器。 用
new 運算符來建立對象的過程，實際上也只是先克隆 Object.prototype 對象，再進行一些其餘額 外操做的過程。*

對象會記住它的原型

JavaScript 給對象提供了一個名爲__proto__的隱藏屬性，某個對象的__proto__屬性默認會指 向它的構造器的原型對象，即{Constructor}.prototype。
咱們經過代碼來驗證：

var objA = {
    name: 'jason'
}

console.log(objA.__proto__ === Object.prototype); //true

再來

var objB = function(age) {
    this.age = age;
}

var b = new objB();

console.log(b.__proto__ === objB.prototype); //true

<span style="color:red">實際上，__proto__就是對象跟「對象構造器的原型」聯繫起來的紐帶</span> 切記這句話，對將來理解js原型鏈頗有幫助。

若是對象沒法響應某個請求，它會把這個請求委託給它的構造器的原型

雖然 JavaScript 的對象最初都是由 Object.prototype 對象克隆而來的，但對象構造器的原型並不只限於 Object.prototype 上，能夠動態指向其餘對象。

var obj = { name: 'sven' };
var A = function(){};

A.prototype = obj;
var a = new A();
console.log(a.__proto__ === obj); //true
console.log(a.name); // 輸出:sven

上面的代碼中，第一行和第二行本沒有任何關聯，obj是個對象字面量建立的對象，A是個空方法，在第三行代碼執行以前，obj的__proto__指向Object.prototype，A的prototype指向自身的構造器，A.prototype = obj;將引用指向了obj，因此在代碼執行完後，對象a的原型指向obj，雖然a自己沒有name屬性，但原型上擁有name屬性

總結

如今，讓咱們來總結一下js建立對象的幾種方式：

1. 對象字面量

var obj = {};

1. 經過對象構造器建立

var Co = function(){};
var obj = new Co();

1. 經過Object.create();建立（ES5之後版本支持）

var Co = function(){};
var obj = Object.create(Co);

1. 經過class建立（ES6之後版本支持）

class An{
    constructor(name){
        this.name = name;
    }
    
    getName() {
        return this.name;
    }
}

class Dog extends Animal { 
    constructor(name) {
        super(name); 
    }
    speak() {
        return "woof";
    } 
}

var dog = new Dog("Scamp");
console.log(dog.getName()); // Scamp
console.log(dog.speak()); // woof

上面的幾種建立對象的方式有本質的區別，這裏先不作詳細說明，後續學完做用域和閉包後再統一說明。