快捷導(dǎo)航

javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)詳解

更新時(shí)間：2015年07月30日 10:44:42 投稿：mrr

這篇文章主要介紹了javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)詳解，使用對(duì)象字面量，或者向空對(duì)象中動(dòng)態(tài)地添加新成員，是最簡(jiǎn)單易用的對(duì)象創(chuàng)建方法，除了這兩種常用的對(duì)象創(chuàng)建方式，JavaScript還提供了其他方法創(chuàng)建對(duì)象,需要的朋友可以參考下

下面通過(guò)文字詳解加代碼分析的方式給大家分享下javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)知識(shí)。

概述使用對(duì)象字面量，或者向空對(duì)象中動(dòng)態(tài)地添加新成員，是最簡(jiǎn)單易用的對(duì)象創(chuàng)建方法。然而，除了這兩種常用的對(duì)象創(chuàng)建方式，JavaScript還提供了其他方法創(chuàng)建對(duì)象。1).使用工廠函數(shù)創(chuàng)建對(duì)象我們可以編寫(xiě)一個(gè)函數(shù)，此函數(shù)的功能就是創(chuàng)建對(duì)象，可將其.

概述

使用對(duì)象字面量，或者向空對(duì)象中動(dòng)態(tài)地添加新成員，是最簡(jiǎn)單易用的對(duì)象創(chuàng)建方法。
然而，除了這兩種常用的對(duì)象創(chuàng)建方式，JavaScript還提供了其他方法創(chuàng)建對(duì)象。
1).使用工廠函數(shù)創(chuàng)建對(duì)象

我們可以編寫(xiě)一個(gè)函數(shù)，此函數(shù)的功能就是創(chuàng)建對(duì)象，可將其稱(chēng)為“對(duì)象工廠方法”。

復(fù)制代碼代碼如下:

//工廠函數(shù)     

 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;      } //使用工廠函數(shù)創(chuàng)建對(duì)象     

 var person1 = createPerson('張三', 29, '軟件工程師');     

 var person2 = createPerson('李四', 40, '醫(yī)生');

2).定義對(duì)象構(gòu)造函數(shù)

a).對(duì)象構(gòu)造函數(shù)首字母大寫(xiě)
b).內(nèi)部使用this關(guān)鍵字給對(duì)象添加成員
c).使用new關(guān)鍵字調(diào)用對(duì)象構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

//定義對(duì)象“構(gòu)造”函數(shù)
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {

console.info(this.name);
};
} //使用new調(diào)用對(duì)象構(gòu)造函數(shù)創(chuàng)建對(duì)象
var p1 = new Person('張三', 29, '軟件工程師');

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

以普通方式調(diào)用的“構(gòu)造函數(shù)”

構(gòu)造函數(shù)其實(shí)也是一個(gè)函數(shù)，不同之處在于調(diào)用它時(shí)必須要加一個(gè)“new”關(guān)鍵字，如果不加這個(gè)關(guān)鍵字，則對(duì)它的調(diào)用被認(rèn)為是普通函數(shù)調(diào)用。

復(fù)制代碼代碼如下:

//作為普通函數(shù)調(diào)用的構(gòu)造函數(shù)，通過(guò)this添加的屬性，
//成為了window對(duì)象的屬性與方法。
console.info(window.name);//張三
console.info(window.age); //29
console.info(window.job); //軟件工程師

對(duì)象構(gòu)造函數(shù)長(zhǎng)得這個(gè)樣：

復(fù)制代碼代碼如下:

function Person (name) {

this.name = name;

 this.say = function () {

 return "I am " + this.name;

  };

}

實(shí)際上是這樣(示意):

復(fù)制代碼代碼如下:

function Person (name) {

// var this = {};

 this.name = name;

 this.say = function () {

return "I am " + this.name;

 };

    // return this;

}

構(gòu)造函數(shù)完成的工作

1. 創(chuàng)建一個(gè)新的對(duì)象
2. 讓構(gòu)造函數(shù)的this引用這一新創(chuàng)建的對(duì)象
3. 執(zhí)行構(gòu)造函數(shù)中的代碼，這些代碼通常完成向新對(duì)象添加屬性的工作
4. 向外界返回新創(chuàng)建的對(duì)象引用。
對(duì)象構(gòu)造函數(shù)與對(duì)象工廠方法的區(qū)別

1. 對(duì)象構(gòu)造函數(shù)中沒(méi)有顯式的對(duì)象創(chuàng)建代碼
2. 新對(duì)象應(yīng)具備的屬性與方法是通過(guò)this引用添加的.
3. 對(duì)象構(gòu)造函數(shù)中沒(méi)有return語(yǔ)句
通常會(huì)把對(duì)象構(gòu)造函數(shù)的首字母設(shè)置為大寫(xiě)的，以區(qū)別于普通函數(shù)。
對(duì)象的constructor屬性

a).使用對(duì)象工廠函數(shù)創(chuàng)建對(duì)象，每個(gè)對(duì)象的constructor屬性引用Object()

復(fù)制代碼代碼如下:

var person = createPerson('張三', 29, '軟件工程師');
//使用工廠方法創(chuàng)建對(duì)象，

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

//true

b).使用對(duì)象構(gòu)造函數(shù)創(chuàng)建對(duì)象，每個(gè)對(duì)象的constructor屬性引用這個(gè)構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

var p = new Person('張三', 29, '軟件工程師');
//使用對(duì)象構(gòu)造函數(shù)創(chuàng)建對(duì)象，
//每個(gè)對(duì)象的constructor屬性，引用這個(gè)構(gòu)造函數(shù)
console.info(p.constructor === Person);
//true如何避免“忘記”new?可以使用arguments.callee解決這個(gè)問(wèn)題
//了解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

復(fù)制代碼代碼如下:

//避免忘記new
function MyObject(value)
{
if (!(this instanceof arguments.callee))

{
//如果調(diào)用者忘記加上new了，就加上new再調(diào)用一次

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

以上內(nèi)容就是javascript設(shè)計(jì)模式之對(duì)象工廠函數(shù)與構(gòu)造函數(shù)詳解，希望大家喜歡。

您可能感興趣的文章: