工廠模式與建構函式模式

2021-08-31 23:37:54 字數 2713 閱讀 1519

簡單工廠模式

以object建構函式或字面量的方式建立物件有著重複性,會產生大量重複**的缺陷,由此,便出現了工廠模式。

function createobj (name,age) 

var obj1 = createobj("小明",66);

var obj2 = createobj("小白",13);

console.log(obj1.name) //小明

console.log(obj2.name) //小白

工廠模式的缺陷

由於新建的所有物件都是object的例項。所以出現了物件的識別問題

console.log(obj1 instanceof object) //true

console.log(obj2 instanceof object) //true

為了解決上述問題,又出現了建構函式模式

function createobj (name,age) 

}var obj1 = new createobj('小白',19);

var obj2 = new createobj('小明',10);

console.log(obj1.name)//小白

console.log(obj2.name)//小明

可以看到工廠模式與建構函式的區別

沒有在函式內部新建object例項 — var obj = new object();

把屬性和方法都新增到了this上。

最後也沒有返回值。

注意,函式名的第乙個字母是大寫,當然沒有也可以,但這樣做是為了區分建構函式與普通函式的區別,按照慣例是要加上的。事實上,建構函式和普通函式一樣,沒有什麼區別。而當呼叫函式的時候如果使用了new操作符,那麼這個普通的函式就成了乙個建構函式。

當使用了new操作符對函式進行呼叫的時候,後台會新建乙個物件,將建構函式作用域賦給新的物件,所以this指標就指向了這個物件。最後是執行建構函式裡的**,這裡是給新建的物件中新增了兩個屬性與方法。

此外,我們可以對這些例項化物件進行識別了。

function createobj1 (name,age)

}function createobj2 (name,age)

}var obj1 = new createobj1("小明",11);

var obj2 = new createobj2("小紅",11);

console.log(obj1.constructor) //createobj1 obj1例項的建構函式是createobj1

console.log(obj2.constructor) //createobj2 obj2例項的建構函式是createobj2

console.log(obj1 instanceof createobj1) //true obj1從屬於createobj1

console.log(obj2 instanceof createobj2) //true obj2從屬於createobj2

console.log(obj1 instanceof createobj2) //false obj1不從屬於createobj2

由此解決了物件識別的問題,我們可以知道這些例項物件都從屬於誰,而不像工廠模式一樣,所以的的例項物件都只是從屬於object。但其實所以的物件都是從屬於object的。

console.log(obj1 instanceof object) //true 

console.log(obj2 instanceof object) //true

console.log(obj1.__proto__.__proto__ === object.prototype) //true

但建構函式模式仍存在一些問題,即每個方法都會被重新建立一遍。

function createobj1 (name,age) 

}

以上函內在sayname屬性上定義了乙個方法。而定義乙個方法,就會生成乙個新的物件。(函式也是物件)

如同 : var sayname = new function(…)

這樣,隨著建構函式的每一次呼叫,就會新建出越來越多的相同的方法,而這些方法的功能都是相同的,浪費了空間。

function createobj1 () 

}var obj1 = new createobj1();

var obj2 = new createobj1();

console.log(obj1.sayname == obj2.sayname) //false

通過位址的比較可以發現,不同例項之間的方法的引用位址是不同的。

如果說要避免重複建立方法的問題,可以這樣做:

function createobj1 () 

function sayname ()

var obj1 = new createobj1();

var obj2 = new createobj1();

console.log(obj1.sayname == obj2.sayname)//true

我們把函式的定義放到建構函式的外邊,然後在建構函式裡儲存函式的引用位址。從而避免了重複定義函式的問題。

但這種方案存在很多缺陷,並沒有被人們所用,缺少封裝性,汙染全域性。解決的方式是通過原型模式來解決。

JS中的工廠模式與建構函式模式

ecmascript中無法建立類,開發人員就發明了一種函式,用函式來封裝以特定介面建立物件的細節,如下 工廠模式 function creatperson name,age,job o.name name o.age age o.job job o.sayname function return o...

建構函式模式

已經n天沒有學習了。中間辦了好多事,關乎人生大事,所以斷了學習。貌似理由很充分。總之,今天是十一長假的第二天,沒打算出去玩,把前段時間沒學習的趕緊彌補一下吧。上回說到建立物件時用的工廠模式,減少了 重複,可是不能區分出每個例項所對應的物件,於是建構函式登場了。function createobjec...

建構函式模式

function student props student.prototype.hello function function createstudent props var xiaoming createstudent xiaoming.hello hello xiaoming 傳進乙個陣列 f...