JavaScript 學習筆記(六)

來源:互聯網
上載者:User

一、 工廠方式
自己的理解:要建立很多個對象的執行個體,這些執行個體有相同的屬性,但是有不同的屬性值。這個時候就需要創個工廠函數(factory function)。
工廠函數(factory function):建立並返回特定類型的對象。
工廠函數中如果一個屬性是方法的話,可以在工廠函數的外面定義對象的方法,然後通過屬性指向該方法,從而可以避開每次都調用自己的屬性方法,這樣做使得每個對象都共用了同一個函數。
樣本: 複製代碼 代碼如下:<script type="text/javascript">
//工廠函數外面定義對象的方法
function ShowNameFn() {
alert(this.Name);
}
//工廠方式建立對象
function CreatBOFn(sName, iAge, bSex) {
var BO = new Object();
BO.Name = sName;
BO.Age = iAge;
BO.Sex = bSex;
BO.ShowName = ShowNameFn; //該屬性實際上是指向函數的指標,是一個方法
return BO;
}
//按鈕測試調用
function FactoryCreateFn() {
var oPerson1 = CreatBOFn("張三", 18, true); //建立執行個體實際上是直接調用方法
oPerson1.ShowName();
}
</script>

總結:工廠函數這種方式定義類或對象,他在建立執行個體的時候就調用這個工廠函數。
二、 建構函式方式
第一步選擇類名,即建構函式的名字,BO名首字母大寫,看下面代碼發現跟上面的工廠函數類似。
樣本: 複製代碼 代碼如下://------第二種:建構函式方式--------------------------------
function Car(color, money) {
this.Color = color;
this.Money = money;
this.ShowMoney = function() {
alert(this.Money);
}
}
//按鈕調用測試
function NewCarFn() {
var Car1 = new Car("紅色", "23萬RMB");
Car1.ShowMoney();
}
//----------------------------------------------------------

比較上一種工廠函數方式的區別:
① 建構函式內部沒有建立對象,而是使用this關鍵字。
② 使用new運算子調用建構函式。
三、 原型方式
利用對象的prototype屬性,可以把他看成建立新對象所依賴的原型,用空建構函式來設定類名,然後所有的屬性和方法都被直接賦予prototype屬性。
原型方式的問題:
首先,這個建構函式沒有參數,使用原型方式時,不能通過給建構函式傳遞參數初始化屬性的值。必須在對象建立後才能改變屬性的預設值。
其次,當屬性指向的是對象,而不是函數時,對象卻被多個執行個體共用的,其中一個改變將引起其他對象的改變。
樣本: 複製代碼 代碼如下://先定義一個空的建構函式
function Car() {
}
//屬性和方法直接賦予prototype屬性
Car.prototype.Color = "紅色,";
Car.prototype.Money = "20萬";
Car.prototype.Drivers = new Array("小三", "小四");
var Car1 = new Car();
Car1.Drivers.push("小五"); //執行個體1中給對象Drivers新增了值(實際上就是在原型裡面加了多了個“小五”,所以當new第二個對象的時候讀屬性Drivers也出現了小五)
alert(Car1.Drivers);
var Car2 = new Car();
alert(Car2.Drivers); //執行個體2中,對象中的值改變了!輸出“小三,小四,小五”

四、 混合的建構函式/原型方式
聯合使用建構函式和原型方式,就可以像其他語言一樣的建立對象。
建構函式定義對象的所有非函數屬性,原型方式定義對象的函數屬性(方法)。
樣本: 複製代碼 代碼如下:function BOStudent(name,age) {
this.姓名 = name;
this.年齡 = age;
this.課程 = new Array("語文","數學");
}
BOStudent.prototype.ShowName = function() {
alert(this.姓名);
};
//點擊按鈕調試
function Admixture() {
var stu1 = new BOStudent("張三", 20); //new第一個BO
var stu2 = new BOStudent("李四", 22); //new第二個BO
stu1.課程.push("物理"); //給對象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") {
BODynamicPrototype.prototype.ShowName = 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.課程.push("333"); //給對象1 添加物理課程項
alert(stu1.課程);
alert(stu2.課程);
}

六、 混合工廠方式
目的是建立假建構函式,只返回另一種對象的新執行個體。這種方式在對象方法內部管理方面與經典方式有著相同的問題。強烈建議:除非萬不得已避免使用!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.