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.課程);
}
六、 混合工廠方式
目的是創建假構造函數,只返回另一種對象的新實例。這種方式在對象方法內部管理方面與經典方式有着相同的問題。強烈建議:除非萬不得已避免使用!
-
製作網頁,dreamweaver的基本步驟
網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIFs,JPEGs,PNGs)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。以下是小編為大家搜索整理的Dreamweaver製作網頁的基本步驟,歡迎閲讀!更多精彩內容請及時關注我們考試...
-
講解HTML中iframe和frame的區別
不知道你在項目中用過frameset屬性沒有,frameset這個屬性是在去年我在一個在線客服系統製作中用過,因為客服系統要有固定的佈局,上面一塊,下面一塊等等,當時就是用的frameset和frame。在我用完了這些屬性之後,我才明白了iframe和frame的`區別。因為在這之前,我項目中...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...