當前位置:才華齋>設計>網頁設計>

javascript工廠方式的使用

網頁設計 閱讀(2.85W)

一、 工廠方式

javascript工廠方式的使用

自己的理解:要建立很多個物件的例項,這些例項有相同的屬性,但是有不同的屬性值。這個時候就需要創個工廠函式(factory function)。

工廠函式(factory function):建立並返回特定型別的物件。

工廠函式中如果一個屬性是方法的話,可以在工廠函式的外面定義物件的方法,然後通過屬性指向該方法,從而可以避開每次都呼叫自己的屬性方法,這樣做使得每個物件都共享了同一個函式。

示例:

複製程式碼 程式碼如下:

//工廠函式外面定義物件的方法

function ShowNameFn() {

alert();

}

//工廠方式建立物件

function CreatBOFn(sName, iAge, bSex) {

var BO = new Object();

= sName;

= iAge;

= bSex;

Name = ShowNameFn; //該屬性實際上是指向函式的指標,是一個方法

return BO;

}

//按鈕測試呼叫

function FactoryCreateFn() {

var oPerson1 = CreatBOFn("張三", 18, true); //建立例項實際上是直接呼叫方法

Name();

}

總結:工廠函式這種方式定義類或物件,他在建立例項的時候就呼叫這個工廠函式。

二、 建構函式方式

第一步選擇類名,即建構函式的名字,BO名首字母大寫,看下面程式碼發現跟上面的工廠函式類似。

示例:

複製程式碼 程式碼如下:

//------第二種:建構函式方式--------------------------------

function Car(color, money) {

r = color;

y = money;

Money = function() {

alert(y);

}

}

//按鈕呼叫測試

function NewCarFn() {

var Car1 = new Car("紅色", "23萬RMB");

Money();

}

//----------------------------------------------------------

比較上一種工廠函式方式的區別:

① 建構函式內部沒有建立物件,而是使用this關鍵字。

② 使用new運算子呼叫建構函式。

三、 原型方式

利用物件的prototype屬性,可以把他看成建立新物件所依賴的原型,用空建構函式來設定類名,然後所有的屬性和方法都被直接賦予prototype屬性。

原型方式的問題:

首先,這個建構函式沒有引數,使用原型方式時,不能通過給建構函式傳遞引數初始化屬性的值。必須在物件建立後才能改變屬性的預設值。

其次,當屬性指向的是物件,而不是函式時,物件卻被多個例項共享的,其中一個改變將引起其他物件的改變。

示例:

複製程式碼 程式碼如下:

//先定義一個空的建構函式

function Car() {

}

//屬性和方法直接賦予prototype屬性

r = "紅色,";

y = "20萬";

ers = new Array("小三", "小四");

var Car1 = new Car();

("小五"); //例項1中給物件Drivers新增了值(實際上就是在原型裡面加了多了個“小五”,所以當new第二個物件的時候讀屬性Drivers也出現了小五)

alert(ers);

var Car2 = new Car();

alert(ers); //例項2中,物件中的值改變了!輸出“小三,小四,小五”

四、 混合的建構函式/原型方式

聯合使用建構函式和原型方式,就可以像其他語言一樣的建立物件。

建構函式定義物件的所有非函式屬性,原型方式定義物件的.函式屬性(方法)。

示例:

複製程式碼 程式碼如下:

function BOStudent(name,age) {

this.姓名 = name;

this.年齡 = age;

this.課程 = new Array("語文","數學");

}

Name = function() {

alert(this.姓名);

};

//點選按鈕除錯

function Admixture() {

var stu1 = new BOStudent("張三", 20); //new第一個BO

var stu2 = new BOStudent("李四", 22); //new第二個BO

stu1.課程("物理"); //給物件1 新增物理課程項

alert(stu1.課程);

alert(stu2.課程);

}

混合的建構函式/原型方式是ECMAScript採用的主要方式,他具有其他方式的特性,卻沒有他們的副作用。

五、 動態原型方法

大多數的面嚮物件語言,定義類時,屬性和方法都打包在一起。而上面的混合建構函式/原型方式屬性和方法是分開的,有些人認為在建構函式內部找屬性,在外面找方法的做法不合邏輯,因此也就產生了動態原型方法。

區別在於:賦予物件的方法的位置不同。動態原型方法是在建構函式的內部,而上面的第四種是在建構函式外部。

示例:

複製程式碼 程式碼如下:

function BODynamicPrototype(name, age) {

this.姓名 = name;

this.年齡 = age;

this.課程 = new Array("111", "222");

//_initialized標識判斷是否已經初始化過,即是否已給原型賦予了任何方法,該方法只建立並賦值一次

if (typeof BODynamicPrototype._initialized == "undefined") {

Name = function() {

alert(this.姓名);

};

BODynamicPrototype._initialized = true;

}

}

//點選按鈕除錯

function DynamicPrototype() {

var stu1 = new BODynamicPrototype("aaa", 20); //new第一個BO

var stu2 = new BODynamicPrototype("bbb", 22); //new第二個BO

stu1.課程("333"); //給物件1 新增物理課程項

alert(stu1.課程);

alert(stu2.課程);

}

六、 混合工廠方式

目的是建立假建構函式,只返回另一種物件的新例項。這種方式在物件方法內部管理方面與經典方式有著相同的問題。強烈建議:除非萬不得已避免使用!