constructor設計模式

leanote 發布于2019-08-21 18:29 / 1651人閱讀

摘要：對象的構造函數用于創建特定類型的對象既要準備使用對象，也要接收參數，構造函數在創建對象時可以用來設置成員屬性和方法的值。

在經典的面向對象編程語言中，constructor是一個特殊的方法，被用來初始化一個新建的對象，一旦該對象被分配內存話。

在JavaScript中幾乎所有的東西都是一個對象，然而常常引起我們興趣的是對象的constructor。

對象的構造函數用于創建特定類型的對象（既要準備使用對象，也要接收參數），構造函數在創建對象時可以用來設置成員屬性和方法的值。

創建對象

在JavaScript中創建對象的三種通用方法如下：

// 每種方法將創建一個空對象

var newObject = {}

// or

var newObject = Object.create( Object.prototype )

// or

var newObject = new Object();

最后一個方法實現對象的創建可以傳入指定的值，如果沒有傳遞，將創建一個空對象，然后返回它。

傳入String，返回String，類似于new String();
傳入Number，返回Number，類似于new Number();
傳入Object，返回Object，相當于沒傳

為對象指定鍵和值有如下四種方法：

兼容ES3的方法

// 1. `.`(Dot) 語法
// 設置屬性
newObject.someKey = "Hello world";
// 獲取屬性
var value = newObject.somekey;


// 2. "[]"方括號語法
// 設置屬性
newObject["someKey"] = "Hello World";
// 獲取屬性
var value = newObject["someKey"];

兼容ES5的方法（要了解更多的信息，請轉 http://kangax.github.com/es5-compat-table/）

// 3. Object.defineProperty
// 設置屬性
Object.defineProperty(newObject, "someKey", {
    value: "Hello World",
    writable: true,
    enumerable: true,
    configurable: true
})
// 獲取屬性的方法，用1，2中方法即可

// 詳細了解Object.defineProperty的使用可參考[https://segmentfault.com/a/1190000007434923](https://segmentfault.com/a/1190000007434923)

// 4. Object.defineProperties
// 設置屬性

Object.defineProperties(newObject, {
    "someKey": {
        value: "Hello World",
        writable: true
    },
    "anotherKey": {
        value: "Ha ha",
        writable: true
    }
})

// 獲取屬性的方法，用1，2中方法即可

對象的繼承

前面我們說到幾種的對象的創建方式，在三種對象的創建中，第一種方式最簡單，效率更高，其他兩種內部都用了對象的繼承,如果沒有傳入任何參數，實現和第一種相似。下面試第二三種創建對象的實例：

// 第二種
var obj = {};
obj.a=1;
obj.a -> 1
var obj2 = Object.create(obj)
obj2.a -> 1

// 第三種
var obj = {};
obj.a = 1;
obj.a -> 1
var obj2  = new Object(obj);
obj2.a -> 1

所以只是要創建一個空對象，第一種方法更好，要實現對象的繼承用第二三種方法，第二三種方法的區別在于前者是ES3，后者是ES5。

// Object.create 的內部實現如下：
Object.create = function(o) {
    function F(){}
    F.prototype=o;
    return new F();
}

constructor 基礎

眾所周知，JavaScript一門不支持 class 這個概念，但是它支持對象的構造函數，通過關鍵字 new 我們想要一個構造函數創建一個對象和它用函數定義的成員。

在constructor的內部，this 關鍵字是被創建的新對象的引用。重溫對象的創建過程，一個基礎的 constructor 如下所示：

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;
 
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
 
// 用法:
 
// 創建一個car的實例 
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
 
// 結果輸出
console.log( civic.toString() ); -> "Honda Civic has done 20000 miles"
console.log( mondeo.toString() ); -> "Ford Mondeo has done 5000 miles"·

如果現在就把它定義為一個設計模式相信，很多人對不會用它，因為它存在著一些問題。其中一個就是繼承性，另一個是每創建一個對象實例，toString() 方法都要被重新定義，理想的實現方式是要實現 toString() 在不同的實例類型之間共享。

constructor 和 prototype

在JavaScript中，Function 像其他對象一樣，有一個 prototype 。當我們用contructor創建一個對象，所有constructor的 prototype上的屬性都將被新對象繼承。所以上面的例子我們可以修改如下：

function Car( model, year, miles ) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}

Car.prototype.toString = function () {
    return this.model + " has done " + this.miles + " miles";
};
 
// 用法:
 
// 創建一個car的實例 
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
 
// 結果輸出
console.log( civic.toString() ); -> "Honda Civic has done 20000 miles"
console.log( mondeo.toString() ); -> "Ford Mondeo has done 5000 miles"·

這樣，toString() 將實現在不同的對象實例間的共享。

其它設計模式相關文章請轉‘大處著眼，小處著手’——設計模式系列

GPU云服務器云服務器 constructor 代碼設計模式工廠模式設計模式? 設計模式

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

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

JS創建對象模式及其對象原型鏈探究（五）：組合使用構造函數模式和原型模式

摘要：組合使用構造函數模式和原型模式構造函數模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創建對象組合使用構造函數模式和原型模式指向構造函數，這里要將其恢復為指向構造函數。另外，這種混合模式，還支持向構造函數傳遞參數。組合使用構造函數模式和原型模式構造函數模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創建自定義類型的最常見方式，就是組合使用構造函數模式和原型模式。 ...

Shimmer 2019-08-19 17:57 評論0 收藏0
我來重新學習 javascript 的面向對象（part 2）

摘要：先來說其實構造函數也有，原型對象有，實例有也有，或者更加籠統的說，所有對象都是有的。構造函數的原型對象上的會指向構造函數。由于屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。續上一集內容，通過構造函數的方式，成功地更新了生產技術，老板笑呵呵，工人少奔波，只是問題總比辦法多，又遇到一個新問題，就是會造成一些資源的重復和浪費，那么經過工程師們的智慧交流，他們產生了一個新技...

silvertheo 2019-08-26 12:19 評論0 收藏0
淺析JavaScript中原型及constructor、__proto__、prototype的關系

摘要：搞清了構造函數和原型的區別后，就可以繼續了。指向構造函數的原型對象，存在于實例與構造函數的原型對象之間。要注意的是當我們使用下面這種將整個重寫的情況時，會切斷構造函數和原型之間的聯系，也就是說不再指向了，而是指向。前言先說一說為什么要搞清楚JavaScript的原型，因為這就是JS的根。JavaScript雖然不是一門傳統的面向對象語言，但它有自己的類和繼承機制，最重要的就是它采用...

wenzi 2019-08-26 13:54 評論0 收藏0
js知識梳理3：創建對象的模式探究

摘要：起因構造函數對象字面量都可以用來創建單個對象，但有明顯缺點使用同一個接口創建很多對象，會產生大量的重復代碼。組合使用構造函數模式和原型模式創建自定義類型的最常見方式，就是組合使用構造函數模式與原型模式。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的作者和譯者。有發現什么問題...

MrZONT 2019-08-26 12:16 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript對象的幾種創建方式

摘要：三種使用構造函數創建對象的方法和的作用都是在某個特殊對象的作用域中調用函數。這種方式還支持向構造函數傳遞參數。叫法上把函數叫做構造函數，其他無區別適用情境可以在特殊的情況下用來為對象創建構造函數。一、工廠模式工廠模式：使用字面量和object構造函數會有很多重復代碼，在此基礎上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 評論0 收藏0
理解js對象

摘要：將構造函數的作用域賦值給新對象因此指向了新對象執行構造函數的代碼為這個新對象添加屬性返回對象最初是用來標識對象類型的。但提到檢測對象類型，還是使用將構造函數當作函數構造函數與其他函數唯一區別。創建對象雖然Object構造函數與對象字面量都能創建單個對象，但這些方式都有明顯的缺點：使用同一個接口創建很多對象，會產生大量重復代碼。 var obj = {}; //對象字面量 va...

zhouzhou 2019-08-21 16:56 評論0 收藏0