模式學習小結 工廠模式 建構函式 原型模式

2022-02-21 13:59:21 字數 2142 閱讀 9845

一直對工廠模式、建構函式及原型模式的定義有些模糊,今天抽了些時間學了下工廠模式、建構函式及原型模式的區別及用途,小結一番。

一、工廠模式

//

工廠模式

function

createperson(name,age)

var person1 = createperson('one','20');

var person2 = createperson('two','10');

作用:工廠模式可以快速建立類似的物件

缺點:建立的物件不具有識別性,故此我們可以使用構造函來解決這個問題

二、建構函式

//

建構函式

function

person(name,age)

}var person = new person('mrz','26');

例項化建構函式相比於普通的工廠模式,其多也constructor指向了person()用以識別其他例項的建構函式。

new person()包含了四個步聚:

①建立乙個新物件

②將建構函式的作用域賦給新物件(this指向新物件)

③執行建構函式

④返回新物件

建構函式本身也可以直接執行,但是這樣this就指向了window

person('mrz','26');

//呼叫sayname 此時sayname已經定義到了global

window.sayname(); //

mrz

缺點:建構函式每次例項都會將函式內部的屬性,全部複製給新物件,內部定義的函式也是多次例項化,造成不必要的浪費,故此應該將其公用部分復用,故此原型模式可以幫忙解決這一問題。

三、原型模式

//

原型模式

new 原型,新物件的constructor將指向person.prototype,獲取person.prototype上的屬性,同時其本身也新增本身的例項屬性,來獲得本身例項所需的屬性值。

//

原型模式

原型模式也有乙個比較大的問題,那就引用型別的數值,會被共用,乙個物件操作會改變其他物件。

//

原型模式

function

person(){}

person.prototype =

}var person1 = new

person();

var person2 = new

person();

person1.friend.push('three');

console.log(person2.friend);  //["one", "two", "three"]

解決這個問題,可以讓建構函式+原型模式結合解決。

//

建構函式+原型模式

function

person()

person.prototype =

}var person1 = new

person();

var person2 = new

person();

person1.friend.push('three');

console.log(person1.friend);

//['one','two','three']

console.log(person2.friend); //

['one','two']

工廠模式 建構函式入門

工廠模式 把乙個函式封裝好 等待例項化 好處 不用重複寫 function hanshu a,b,c return f var a hanshu 小明 18,學生 var b hanshu 小紅 28,技術 console.log a.name console.log b.name 總結 簡單的使用...

工廠模式與建構函式模式

簡單工廠模式 以object建構函式或字面量的方式建立物件有著重複性,會產生大量重複 的缺陷,由此,便出現了工廠模式。function createobj name,age var obj1 createobj 小明 66 var obj2 createobj 小白 13 console.log o...

設計模式學習小結(1 1) 工廠模式

一般程式架構分為 圖形介面層 邏輯控制層 基礎功能層 作用 延遲子類例項化,一般用於邏輯控制層中。類圖如下 示例 include class iproduct class producta public iproduct class productb public iproduct class cp...