2. 程式人生 > >javascript面向物件系列第二篇——建立物件的5種模式

javascript面向物件系列第二篇——建立物件的5種模式

阿新 • • 發佈：2018-12-30

前面的話

　　如何建立物件，或者說如何更優雅的建立物件，一直是一個津津樂道的話題。本文將從最簡單的建立物件的方式入手，逐步介紹5種建立物件的模式

物件字面量

　　一般地，我們建立一個物件會使用物件字面量的形式

　　[注意]有三種方式來建立物件，包括new建構函式、物件直接量和Object.create()函式，詳細情況移步至此

var person1 = {
    name: "bai",
    age : 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};

　　如果我們要建立大量的物件，則如下所示：

var person1 = {
    name: "bai",
    age : 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};
var person2 = {
    name: "hu",
    age : 25,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};

 
/*
var person3 ...
*/

　　雖然物件字面量可以用來建立單個物件，但如果要建立多個物件，會產生大量的重複程式碼

工廠模式

　　為了解決上述問題，人們開始使用工廠模式。該模式抽象了建立具體物件的過程，用函式來封裝以特定介面建立物件的細節

function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayname = function(){
        alert(
 
this.name);
    }
    return o;
}
var person1 = createPerson('bai',29,'software Engineer');
var person2 = createPerson('hu',25,'software Engineer');

　　工廠模式雖然解決了建立多個相似物件的問題，但沒有解決物件識別的問題，因為使用該模式並沒有給出物件的型別

建構函式模式

　　可以通過建立自定義的建構函式，來定義自定義物件型別的屬性和方法。建立自定義的建構函式意味著可以將它的例項標識為一種特定的型別，而這正是建構函式模式勝過工廠模式的地方。該模式沒有顯式地建立物件，直接將屬性和方法賦給了this物件，且沒有return語句

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");

　　使用建構函式的主要問題是每個方法都要在每個例項上重新建立一遍，建立多個完成相同任務的方法完全沒有必要，浪費記憶體空間

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
//具有相同作用的sayName()方法在person1和person2這兩個例項中卻佔用了不同的記憶體空間
console.log(person1.sayName === person2.sayName);//false

建構函式拓展模式

　　在建構函式模式的基礎上，把方法定義轉移到建構函式外部，可以解決方法被重複建立的問題

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
};
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
console.log(person1.sayName === person2.sayName);//true

　　現在，新問題又來了。在全域性作用域中定義的函式實際上只能被某個物件呼叫，這讓全域性作用域有點名不副實。而且，如果物件需要定義很多方法，就要定義很多全域性函式，嚴重汙染全域性空間，這個自定義的引用型別沒有封裝性可言了

寄生建構函式模式

　　該模式的基本思想是建立一個函式，該函式的作用僅僅是封裝建立物件的程式碼，然後再返回新建立的物件。該模式是工廠模式和建構函式模式的結合

　　寄生建構函式模式與建構函式模式有相同的問題，每個方法都要在每個例項上重新建立一遍，建立多個完成相同任務的方法完全沒有必要，浪費記憶體空間

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
//具有相同作用的sayName()方法在person1和person2這兩個例項中卻佔用了不同的記憶體空間
console.log(person1.sayName === person2.sayName);//false

　　還有一個問題是，使用該模式返回的物件與建構函式之間沒有關係。因此，使用instanceof運算子和prototype屬性都沒有意義。所以，該模式要儘量避免使用

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = new Person("bai",29,"software Engineer");
console.log(person1 instanceof Person);//false
console.log(person1.__proto__ === Person.prototype);//false

穩妥建構函式模式

　　所謂穩妥物件指沒有公共屬性，而且其方法也不引用this的物件。穩妥物件最適合在一些安全環境中(這些環境會禁止使用this和new)或者在防止資料被其他應用程式改動時使用

　　穩妥建構函式與寄生建構函式模式相似，但有兩點不同：一是新建立物件的例項方法不引用this；二是不使用new操作符呼叫建構函式

function Person(name,age,job){
    //建立要返回的物件
    var o = new Object();
    //可以在這裡定義私有變數和函式
    //新增方法
    o.sayName = function(){
        console.log(name);
    };
    //返回物件
    return o;
}
//在穩妥模式建立的物件中，除了使用sayName()方法之外，沒有其他方法訪問name的值
var friend = Person("bai",29,"Software Engineer");
friend.sayName();//"bai"

　　與寄生建構函式模式相似，使用穩妥建構函式模式建立的物件與建構函式之間也沒有什麼關係，因此instanceof操作符對這種物件也沒有什麼意義

原型模式

　　使用原型物件，可以讓所有例項共享它的屬性和方法。換句話說，不必在建構函式中定義物件例項的資訊，而是可以將這些資訊直接新增到原型物件中

function Person(){
    Person.prototype.name = "bai";
    Person.prototype.age = 29;
    Person.prototype.job = "software Engineer";
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person();
person1.sayName();//"bai"
var person2 = new Person();
person2.sayName();//"bai"
alert(person1.sayName == person2.sayName);//true

更簡單的原型模式

　　為了減少不必要的輸入，也為了從視覺上更好地封裝原型的功能，用一個包含所有屬性和方法的物件字面量來重寫整個原型物件

　　但是，經過物件字面量的改寫後，constructor不再指向Person了。因為此方法完全重寫了預設的prototype物件，使得Person.prototype的自有屬性constructor屬性不存在，只有從原型鏈中找到Object.prototype中的constructor屬性

function Person(){};
Person.prototype = {
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//false
console.log(person1.constructor === Object);//true

　　可以顯式地設定原型物件的constructor屬性

function Person(){};
Person.prototype = {
    constructor:Person,
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//true
console.log(person1.constructor === Object);//false

　　由於預設情況下，原生的constructor屬性是不可列舉的，更妥善的解決方法是使用Object.defineProperty()方法，改變其屬性描述符中的列舉性enumerable

function Person(){};
Person.prototype = {
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
Object.defineProperty(Person.prototype,'constructor',{
    enumerable: false,
    value: Person
});
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//true
console.log(person1.constructor === Object);//false

　　原型模式問題在於引用型別值屬性會被所有的例項物件共享並修改，這也是很少有人單獨使用原型模式的原因

function Person(){}
Person.prototype = {
    constructor: Person,
    name: "bai",
    age: 29,
    job: "Software Engineer",
    friend : ["shelby","Court"],
    sayName: function(){
        console.log(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

組合模式

　　組合使用建構函式模式和原型模式是建立自定義型別的最常見方式。建構函式模式用於定義例項屬性，而原型模式用於定義方法和共享的屬性，這種組合模式還支援向建構函式傳遞引數。例項物件都有自己的一份例項屬性的副本，同時又共享對方法的引用，最大限度地節省了記憶體。該模式是目前使用最廣泛、認同度最高的一種建立自定義物件的模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["shelby","Court"];
}
Person.prototype = {
    constructor: Person,
    sayName : function(){
        console.log(this.name);
    }    
}
var person1 = new Person("bai",29,"Software Engineer");
var person2 = new Person("hu",25,"Software Engineer");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person2.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

動態原型模式

　　動態原型模式將組合模式中分開使用的建構函式和原型物件都封裝到了建構函式中，然後通過檢查方法是否被建立，來決定是否初始化原型物件

　　使用這種方法將分開的建構函式和原型物件合併到了一起，使得程式碼更加整齊，也減少了全域性空間的汙染

　　[注意]如果原型物件中包含多個語句，只需要檢測其中一個語句即可

function Person(name,age,job){
    //屬性
    this.name = name;
    this.age = age;
    this.job = job;
    //方法
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    }
}
var friend = new Person("bai",29,"Software Engineer");
friend.sayName();//'bai'

最後

　　本文從使用物件字面量形式建立一個物件開始說起，建立多個物件會造成程式碼冗餘；使用工廠模式可以解決該問題，但存在物件識別的問題；接著介紹了建構函式模式，該模式解決了物件識別的問題，但存在關於方法的重複建立問題；接著介紹了原型模式，該模式的特點就在於共享，但引出了引用型別值屬性會被所有的例項物件共享並修改的問題；最後，提出了建構函式和原型組合模式，建構函式模式用於定義例項屬性，而原型模式用於定義方法和共享的屬性，這種組合模式還支援向建構函式傳遞引數，該模式是目前使用最廣泛的一種模式

　　此外，一些模式下面還有一些解決特殊需求的拓展模式

　　以上

相關推薦

javascript面向物件系列第二篇——建立物件的5種模式

前面的話 　　如何建立物件，或者說如何更優雅的建立物件，一直是一個津津樂道的話題。本文將從最簡單的建立物件的方式入手，逐步介紹5種建立物件的模式 物件字面量 　　一般地，我們建立一個物件會使用物件字面量的形式 　　[注意]有三種方式來建立物件，包括new建構函式、物件直接量和Object.crea

深入理解javascript物件系列第二篇——屬性操作

前面的話 　　對於物件來說，屬性操作是繞不開的話題。類似於“增刪改查”的基本操作，屬性操作分為屬性查詢、屬性設定、屬性刪除，還包括屬性繼承。本文是物件系列的第二篇——屬性操作 屬性查詢 　　屬性查詢一般有兩種方法，包括點運算子和方括號運算子 var o = { p: 'Hello Wor

深入理解javascript物件系列第一篇——初識物件

前面的話 　　javascript中的難點是函式、物件和繼承，前面已經介紹過函式系列。從本系列開始介紹物件部分，本文是該系列的第一篇——初識物件 物件定義 　　javascript的基本資料型別包括undefined、null、boolean、string、number和object。物件和其他基本

第3篇 RabbitMQ的5種模式與例項

3.1 簡單模式Hello World 功能：一個生產者P傳送訊息到佇列Q,一個消費者C接收 生產者實現思路： 建立連線工廠ConnectionFactory，設定服務地址127.0.0.1，埠號5672，設定使用者名稱、密碼、virtual host，從連線工廠中獲取連

javascript面向物件系列第一篇——建構函式和原型物件

前面的話 　　一般地，javascript使用建構函式和原型物件來進行面向物件程式設計，它們的表現與其他面向物件程式語言中的類相似又不同。本文將詳細介紹如何用建構函式和原型物件來建立物件 建構函式 　　建構函式是用new建立物件時呼叫的函式，與普通唯一的區別是建構函式名應該首字母大寫 func

深入理解javascript函數進階系列第二篇——函數柯裏化

計算 all urn ray body turn () 通過 null 前面的話 　　函數柯裏化currying的概念最早由俄國數學家Moses Schönfinkel發明，而後由著名的數理邏輯學家Haskell Curry將其豐富和發展，currying由此得

Python面向物件(定義類和建立物件)

day24 http://www.cnblogs.com/wupeiqi/p/4493506.html Python:函式式+面向物件，函數語言程式設計可以做所有事，但是不一定合適。 小明，10歲，男，上山去砍柴 小明，10歲，男，開車去東北 老李，90歲，男，上山去砍柴 老李，

學習面向物件（二）—建立物件—汪騰騰

學習面向物件（二） 建立物件 （1） object 建構函式或者字面量可以用來建立單個物件 （2） 工廠模式：            優： 解決了大量相似物件的問題         &

java學習（類與物件） 第二更 建立汽車物件 並錄入汽車資訊

最近學習了java的類與物件。 java面向物件程式設計的有三大特徵： ①封裝性 所謂封裝，也就是把客觀事物封裝成抽象的類，並且類可以把自己的資料和方法只讓可信的類或者 物件操作，對不可信的進行資訊隱藏。簡而言之就是，內部操作對外部而言不可見(保護性) ②繼承性 繼承是指它可以使用現有類的所

JavaScript學習筆記（二）——建立物件

在前一節說過，型別可以劃分為基礎型別和引用型別兩大類，而每個物件都是基於一個引用型別建立的。 建立物件的模式有很多種。 一、工廠模式 工廠模式是軟體工程領域一種廣為人知的設計模式，開發人員可以編寫一種函式，用函式進行封裝，通過特定的介面來建立物件，舉例說明。 function cre

java學習（類與物件） 第二更 建立汽車物件 並錄入汽車資訊

最近學習了java的類與物件。 java面向物件程式設計的有三大特徵： ①封裝性 所謂封裝，也就是把客觀事物封裝成抽象的類，並且類可以把自己的資料和方法只讓可信的類或者 物件操作，對不可信的進行資訊隱藏。簡而言之就是，內部操作對外部而言不可見(保護性) ②繼承性

深入理解javascript選擇器API系列第二篇——getElementsByClassName

前面的話 　　既然有getElementById()和getElementsByTagName()方法，為什麼沒有getElementsByClassName()呢？id屬性、標籤名、class屬性並沒有什麼優劣之分啊。終於，HTML5新增了getElementsByClassName()方法，由於在CSS

java 關於初學面向物件的問題二:建立物件過程

在有static、final、extends、implements修飾的類（包括屬性和方法）的物件建立過程。因此約定下述引用宣告和物件建立： 匿名物件：沒有宣告引用的物件，一般是Has-a關係中的類建

javascript面向對象系列——創建對象的5種模式

type屬性 cnblogs 對象共享 存在 最適 想是 HA 決定 ava 如何創建對象，或者說如何更優雅的創建對象，一直是一個津津樂道的話題。本文將從最簡單的創建對象的方式入手，逐步介紹5種創建對象的模式 對象字面量 　　一般地，我們創建一個對象會使用對象字面量的形

Spring Cloud第二篇 建立一個Eureka Server

在Spring Cloud實現一個Eureka Server是一件非常簡單的事情。下面我們來寫一個Eureka Server DEMO。 編碼 (1) 首先建立一個Maven工程，新增內容如下： (2) 編寫啟動類，在啟動類上新增@EnableEurekaServ

淺談JavaScript物件新增getter與setter的5種方法

定義 getter 與 setter 1.通過物件初始化器在建立物件的時候指明（也可以稱為通過字面值建立物件時宣告） (function () { var o = { a : 7, get b(){return this.a +1;},//通過 get,set的 b,c方法間接性修改 a

ansible系列第二篇(模塊使用)

dde 模塊 屬性。 images att 遠程執行命令 block mat sent ansible系列第二篇(模塊使用) 模塊使用 設置ansible提權 在hosts文件加入sudo提權的密碼: 18.18.23.102 ansible_become_pas

MongoDB基礎教程系列--第二篇 MongoDB基本操作（一）

1、安裝環境 在官網上下載MongoDB的最新版本，根據自身Windows版本下載正確的MongoDB版本。下載後，雙擊32位或者64位.msi檔案，按操作提示安裝就可以了。 說明： 32 位版本的 MongoDB 只支援 2G 以下的資料庫，只適用於測試及評估。 在

Python金融系列第二篇：簡單線性迴歸

作者：chen_h 微訊號 & QQ：862251340 微信公眾號：coderpai 第三篇：多元線性迴歸和殘差分析 第四篇：現代投資組合理論 第五篇：市場風險 第六篇：Fama-French 多因子模型 介紹 在金融和經濟領域，大多數模型都是

Beginng_Java7(譯)：發現類和物件（第二章3.4.5節)(完)

多型 一些現實世界的實體可以改變他們的形式。 例如，水（在地球上而不是星際空間）自然是液體，但在冷凍時會變成固體，在加熱到沸點時會變成氣體。 諸如經歷變態的蝴蝶之類的昆蟲是另一個例子。 改變形式的能力被稱為多型，並且對於在程式語言中建模是有用的。 例如，通過引入