這次帶給大家JS設計模式之構造器模式詳解,JS設計模式之構造器模式使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
在經典的OOP語言中,建構器(也叫建構子)是用來初始化物件的特殊方法。在JS中,因為一切皆對象,對象建構器經常被提起。
對象建構器用於建立制定類型(Class)的對象,可以接受參數用於初始化對象的屬性和方法。
物件建立
在JS中,有三個常用的方法可以建立物件:
//1, 推荐使用 var newObject = {}; //2, var newObject = Object.create( null ); //3, 不推荐 var newObject = new Object();
但是,這也只是建立了三個空對象, 並沒有任何屬性和方法。我們可以透過以下四種方法,為物件設立屬性和方法。
// ECMAScript 3 兼容的方式 // 1. 常规对象定义方式 //设置属性 newObject.someKey = "Hello World"; //获取属性 var key = newObject.someKey; // 2. 方括号方式 // 设置属性 newObject["someKey"] = "Hello World"; //获取属性 var key = newObject["someKey"]; // 仅仅用于ECMAScript 5 // 3. Object.defineProperty // 设置属性 Object.defineProperty( newObject, "someKey", { value: "for more control of the property's behavior", writable: true, enumerable: true, configurable: true }); //可以通过下面的函数简化属性设置 var defineProp = function ( obj, key, value ){ config.value = value; Object.defineProperty( obj, key, config ); }; // 使用方法 var person = Object.create( null );defineProp( person, "car", "Delorean" ); defineProp( person, "dateOfBirth", "1981" ); defineProp( person, "hasBeard", false ); // 4. Object.defineProperties //设置属性 Object.defineProperties( newObject, { "someKey": { value: "Hello World", writable: true }, "anotherKey": { value: "Foo bar", writable: false } }); // 3和4的获取属性方法同1,2.
基本的建構子
我們知道, JS中沒有Class的概念,但它也支援用構造器建立物件。
透過使用【new】關鍵字,我們可以讓一個函數的舉止類似於建構器,從而建立自己的物件實例。
一個基礎的建構器形式如下:
function Car( model, year, miles ) { //这里,this指向新建立的对象自己 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() ); console.log( mondeo.toString() );
這就是簡單的建構器模式, 它有兩個主要問題,
第一,它很難繼承;第二,toString()被每一個物件實例定義一遍,作為函數,它應該被每一個Car類型的實例共享。
使用原型的建構器
# JS中有一個很好的特性:原型【Prototype】,
利用它,建立物件時,所有建構器原型中的屬性都可以被物件實例取得。
這樣多個物件實例就可以共享同一個原型。
我們改善前面的Car例子如下:
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"; }; // 用法 var civic = new Car( "Honda Civic", 2009, 20000 ); var mondeo = new Car( "Ford Mondeo", 2010, 5000 ); //输出 console.log( civic.toString() ); console.log( mondeo.toString() );
在上面的例子中,toString()方法被多個Car物件實例共用。 .
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是JS設計模式之構造器模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!