DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript設計模式Constructor(構造器)模式
javascript設計模式Constructor(構造器)模式
編輯:關於JavaScript     

Constructor是一種在內存已分配給該對象的情況下,用於初始化新創建對象的特殊方法。Object構造器用於創建特定類型的對象–准備好對象以備使用,同事接收構造器可以使用參數,以在第一次創建對象時,設置成員屬性和方法值。

對象創建
創新新對象,在javascript中通常有兩種方法:
 1.對象直面量方法
var newObj = {};

 2.構造器的簡潔方法
var newObj = new Object();
在Object構造器為特定的值創建對象封裝,或者沒有傳遞值時,它將創建一個肯那個對象並返回

 對象賦值的方法:
 1.“點”方法

 //設置屬性
newObj.name = 'LanFeng';
//獲取值
var user= newObj.name;

 1.中括號方法

 //設置屬性
newObj["name"]= 'LanFeng';
//獲取值
var user= newObj["name"];

 1.Object.defineProperty (適用ECMAScript5)

 //設置屬性
Object.defineProperty(newObj,"name",{
  value:"LanFeng",
  writable:true,
  enumerable:true,
  configurable:true
})

 1.Object.defineProperties

 //設置屬性
 Object.defineProperties(newObj,{
   "someKey":{
    value:"Hello Js",
     writable:true
  },
  "anotherKey":{
    value:"Foo bar",
    writable:false
  }
})

Javascript不支持類的概念,但它確實支持與對象一起用的特殊constructor函數,通過在構造器前面加new關鍵字,告訴js像使用構造器一樣實例化一個新對象,並且對象成員由該函數定義。
在構造器內,關鍵字this引用新創建的對象。回顧對象創建,基本的構造器:

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";
  }
}
//創建實例化對象

var civio = new Car("Honda Civio",2009,20000);

var mondeo= new Car("Ford Mondeo",2009,5000);

上面例子是一個簡單的構造器模式版本,但它確實存在一些問題,其中一個問題是,它使用繼承變得困難,另外一個問題是,toString()這樣的函數是為每個使用Car構造器創建的新對象而分別重新定義的,這個不是最理想的,因為這種函數應該在所有的Car類型實例直接共享。

javascript中有有一個prototype的屬性,調用js構造器創建一個對象後,新對象就會具有構造器原型的所有屬性,通過這種方式,可以創建多個對象,並訪問相同的原型,實現方法共享。

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 civio = new Car("Honda Civio",2009,20000);
var mondeo= new Car("Ford Mondeo",2009,5000);
console.log(civio.toString())
console.log(mondeo.toString())

現在toString()的單一實例就能夠在所有Car對著之間共享。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved