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

luxixing 發布于2019-08-22 15:05 / 3501人閱讀

摘要：對象會記住它的原型給對象提供了一個名為的隱藏屬性，某個對象的屬性默認會指向它的構造器的原型對象，即。我們通過代碼來驗證再來實際上，就是對象跟對象構造器的原型聯系起來的紐帶切記這句話，對未來理解原型鏈很有幫助。

封裝 封裝數據

在許多語言的對象系統中，封裝數據是由語法解析來實現的，這些語言也許提供了 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

實際上，__proto__就是對象跟“對象構造器的原型”聯系起來的紐帶切記這句話，對未來理解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創建對象的幾種方式：

對象字面量

var obj = {};

通過對象構造器創建

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

通過Object.create();創建（ES5以后版本支持）

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

通過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

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

云服務器 GPU云服務器原型模式 javascript基礎與實踐教程 javascript設計模式 javascript命令模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93150.html

JavaScript設計模式與開發實踐 | 01 - 面向對象的JavaScript

摘要：在中，并沒有對抽象類和接口的支持。例如，當對象需要對象的能力時，可以有選擇地把對象的構造器的原型指向對象，從而達到繼承的效果。本節內容為設計模式與開發實踐第一章筆記。動態類型語言編程語言按數據類型大體可以分為兩類：靜態類型語言與動態類型語言。靜態類型語言在編譯時已確定變量類型，動態類型語言的變量類型要到程序運行時，待變量被賦值后，才具有某種類型。而JavaScript是一門典型...

suxier 2019-08-21 10:44 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0