DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript設計模式之對象工廠函數與構造函數詳解
javascript設計模式之對象工廠函數與構造函數詳解
編輯:JavaScript基礎知識     

下面通過文字詳解加代碼分析的方式給大家分享下javascript設計模式之對象工廠函數與構造函數的相關知識。

概述使用對象字面量,或者向空對象中動態地添加新成員,是最簡單易用的對象創建方法。然而,除了這兩種常用的對象創建方式,JavaScript還提供了其他方法創建對象。1).使用工廠函數創建對象我們可以編寫一個函數,此函數的功能就是創建對象,可將其.

概述

使用對象字面量,或者向空對象中動態地添加新成員,是最簡單易用的對象創建方法。
然而,除了這兩種常用的對象創建方式,JavaScript還提供了其他方法創建對象。
1).使用工廠函數創建對象

我們可以編寫一個函數,此函數的功能就是創建對象,可將其稱為“對象工廠方法”。

復制代碼 代碼如下:
//工廠函數    
 function createPerson(name, age, job) {        
 var o = new Object();        
 o.name = name;        
 o.age = age;        
 o.job = job;        
 o.sayName = function () {            
 console.info(this.name);        
 };        
 return o;      } //使用工廠函數創建對象    
 var person1 = createPerson('張三', 29, '軟件工程師');    
 var person2 = createPerson('李四', 40, '醫生');

2).定義對象構造函數

  a).對象構造函數首字母大寫
  b).內部使用this關鍵字給對象添加成員
  c).使用new關鍵字調用對象構造函數

復制代碼 代碼如下:
//定義對象“構造”函數     
function Person(name, age, job) {
this.name = name;        
 this.age = age;         
this.job = job;         
this.sayName = function () {            

  console.info(this.name);         
};     
} //使用new調用對象構造函數創建對象    
 var p1 = new Person('張三', 29, '軟件工程師');     

var p2 = new Person('李四', 40, '醫生');

以普通方式調用的“構造函數”

構造函數其實也是一個函數,不同之處在於調用它時必須要加一個“new”關鍵字,如果不加這個關鍵字,則對它的調用被認為是普通函數調用。

復制代碼 代碼如下:
 //作為普通函數調用的構造函數,通過this添加的屬性,
//成為了window對象的屬性與方法。
console.info(window.name);//張三
console.info(window.age); //29
console.info(window.job); //軟件工程師

對象構造函數長得這個樣:

復制代碼 代碼如下:
function Person (name) {
this.name = name;
 this.say = function () {
 return "I am " + this.name;
  };
}

實際上是這樣(示意):

復制代碼 代碼如下:
function Person (name) {
// var this = {};
 this.name = name;
 this.say = function () {
return "I am " + this.name;
 };
    // return this;
}

構造函數完成的工作

1. 創建一個新的對象
2. 讓構造函數的this引用這一新創建的對象
3. 執行構造函數中的代碼,這些代碼通常完成向新對象添加屬性的工作
4. 向外界返回新創建的對象引用。
對象構造函數與對象工廠方法的區別

1. 對象構造函數中沒有顯式的對象創建代碼
2. 新對象應具備的屬性與方法是通過this引用添加的.
3. 對象構造函數中沒有return語句
 通常會把對象構造函數的首字母設置為大寫的,以區別於普通函數。
對象的constructor屬性

a).使用對象工廠函數創建對象,每個對象的constructor屬性引用Object()

 復制代碼 代碼如下:
var person = createPerson('張三', 29, '軟件工程師');
 //使用工廠方法創建對象,

其constructor屬性引用Object()函數
console.info(person1.constructor === Object); 

//true

b).使用對象構造函數創建對象,每個對象的constructor屬性引用這個構造函數

復制代碼 代碼如下:
var p = new Person('張三', 29, '軟件工程師');
//使用對象構造函數創建對象,
//每個對象的constructor屬性,引用這個構造函數
console.info(p.constructor === Person);
 //true如何避免“忘記”new?可以使用arguments.callee解決這個問題     
//了解arguments.callee的作用    
function TestArgumentsCallee()
 {         
console.info(this);         
console.info(this instanceof TestArgumentsCallee);        
 console.info(this instanceof arguments.callee);    
 };     
TestArgumentsCallee(); //window                                         

//false                                         
//false     
new TestArgumentsCallee(); 
//TestArgumentsCallee             
//true                                             

  //true

於是,可以直接用arguments.callee

復制代碼 代碼如下:
 //避免忘記new    
 function MyObject(value)
{        
 if (!(this instanceof arguments.callee))

{            
 //如果調用者忘記加上new了,就加上new再調用一次             

return new MyObject(value);        
 }        
 this.prop = value;    
 }     
//測試     
var obj1 = new MyObject(100);    
 console.info(obj1.prop);//100    
 var obj2 = MyObject(200);       
console.info(obj2.prop); //200

以上內容就是javascript設計模式之對象工廠函數與構造函數詳解,希望大家喜歡。

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