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設計模式之物件工廠函數與建構函數詳解，希望大家喜歡。