javascript工廠方式的使用

時(shí)間：2020-11-21 14:32:46 JavaScript 我要投稿

javascript工廠方式的使用

　　一、工廠方式

javascript工廠方式的使用

　　自己的理解：要?jiǎng)?chuàng)建很多個(gè)對(duì)象的實(shí)例，這些實(shí)例有相同的屬性，但是有不同的屬性值。這個(gè)時(shí)候就需要?jiǎng)?chuàng)個(gè)工廠函數(shù)（factory function）。

　　工廠函數(shù)（factory function）：創(chuàng)建并返回特定類型的對(duì)象。

　　工廠函數(shù)中如果一個(gè)屬性是方法的話，可以在工廠函數(shù)的外面定義對(duì)象的方法，然后通過屬性指向該方法，從而可以避開每次都調(diào)用自己的屬性方法，這樣做使得每個(gè)對(duì)象都共享了同一個(gè)函數(shù)。

　　示例：

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

　　//工廠函數(shù)外面定義對(duì)象的方法

　　function ShowNameFn() {

　　alert(this.Name);

　　}

　　//工廠方式創(chuàng)建對(duì)象

　　function CreatBOFn(sName, iAge, bSex) {

　　var BO = new Object();

　　BO.Name = sName;

　　BO.Age = iAge;

　　BO.Sex = bSex;

　　BO.ShowName = ShowNameFn; //該屬性實(shí)際上是指向函數(shù)的指針，是一個(gè)方法

　　return BO;

　　}

　　//按鈕測(cè)試調(diào)用

　　function FactoryCreateFn() {

　　var oPerson1 = CreatBOFn("張三", 18, true); //創(chuàng)建實(shí)例實(shí)際上是直接調(diào)用方法

　　oPerson1.ShowName();

　　}

　　總結(jié)：工廠函數(shù)這種方式定義類或?qū)ο�，他在�?chuàng)建實(shí)例的時(shí)候就調(diào)用這個(gè)工廠函數(shù)。

　　二、構(gòu)造函數(shù)方式

　　第一步選擇類名，即構(gòu)造函數(shù)的名字，BO名首字母大寫，看下面代碼發(fā)現(xiàn)跟上面的工廠函數(shù)類似。

　　示例：

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

　　//------第二種：構(gòu)造函數(shù)方式--------------------------------

　　function Car(color, money) {

　　this.Color = color;

　　this.Money = money;

　　this.ShowMoney = function() {

　　alert(this.Money);

　　}

　　//按鈕調(diào)用測(cè)試

　　function NewCarFn() {

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

　　Car1.ShowMoney();

　　}

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

　　比較上一種工廠函數(shù)方式的.區(qū)別：

　�、� 構(gòu)造函數(shù)內(nèi)部沒有創(chuàng)建對(duì)象，而是使用this關(guān)鍵字。

　�、� 使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)。

　　三、原型方式

　　利用對(duì)象的prototype屬性，可以把他看成創(chuàng)建新對(duì)象所依賴的原型，用空構(gòu)造函數(shù)來設(shè)置類名，然后所有的屬性和方法都被直接賦予prototype屬性。

　　原型方式的問題：

　　首先，這個(gè)構(gòu)造函數(shù)沒有參數(shù)，使用原型方式時(shí)，不能通過給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值。必須在對(duì)象創(chuàng)建后才能改變屬性的默認(rèn)值。

　　其次，當(dāng)屬性指向的是對(duì)象，而不是函數(shù)時(shí)，對(duì)象卻被多個(gè)實(shí)例共享的，其中一個(gè)改變將引起其他對(duì)象的改變。

　　示例：

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

　　//先定義一個(gè)空的構(gòu)造函數(shù)

　　function Car() {

　　}

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

　　Car.prototype.Color = "紅色，";

　　Car.prototype.Money = "20萬";

　　Car.prototype.Drivers = new Array("小三", "小四");

　　var Car1 = new Car();

　　Car1.Drivers.push("小五"); //實(shí)例1中給對(duì)象Drivers新增了值(實(shí)際上就是在原型里面加了多了個(gè)“小五”,所以當(dāng)new第二個(gè)對(duì)象的時(shí)候讀屬性Drivers也出現(xiàn)了小五)

　　alert(Car1.Drivers);

　　var Car2 = new Car();

　　alert(Car2.Drivers); //實(shí)例2中，對(duì)象中的值改變了！輸出“小三，小四，小五”

　　四、混合的構(gòu)造函數(shù)/原型方式

　　聯(lián)合使用構(gòu)造函數(shù)和原型方式，就可以像其他語言一樣的創(chuàng)建對(duì)象。

　　構(gòu)造函數(shù)定義對(duì)象的所有非函數(shù)屬性，原型方式定義對(duì)象的函數(shù)屬性（方法）。

　　示例：

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

　　function BOStudent(name,age) {

　　this.姓名 = name;

　　this.年齡 = age;

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

　　}

　　BOStudent.prototype.ShowName = function() {

　　alert(this.姓名);

　　};

　　//點(diǎn)擊按鈕調(diào)試

　　function Admixture() {

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

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

　　stu1.課程.push("物理"); //給對(duì)象1 添加物理課程項(xiàng)

　　alert(stu1.課程);

　　alert(stu2.課程);

　　}

　　混合的構(gòu)造函數(shù)/原型方式是ECMAScript采用的主要方式，他具有其他方式的特性，卻沒有他們的副作用。

　　五、動(dòng)態(tài)原型方法

　　大多數(shù)的面向?qū)ο笳Z言，定義類時(shí)，屬性和方法都打包在一起。而上面的混合構(gòu)造函數(shù)/原型方式屬性和方法是分開的，有些人認(rèn)為在構(gòu)造函數(shù)內(nèi)部找屬性，在外面找方法的做法不合邏輯，因此也就產(chǎn)生了動(dòng)態(tài)原型方法。

　　區(qū)別在于：賦予對(duì)象的方法的位置不同。動(dòng)態(tài)原型方法是在構(gòu)造函數(shù)的內(nèi)部，而上面的第四種是在構(gòu)造函數(shù)外部。

　　示例：

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

　　function BODynamicPrototype(name, age) {

　　this.姓名 = name;

　　this.年齡 = age;

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

　　//_initialized標(biāo)識(shí)判斷是否已經(jīng)初始化過，即是否已給原型賦予了任何方法，該方法只創(chuàng)建并賦值一次

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

　　BODynamicPrototype.prototype.ShowName = function() {

　　alert(this.姓名);

　　};