建構函式模式與原型模式的組合使用
阿新 • • 發佈:2019-01-03
建構函式模式
function Obj (name) {
this.name = name;
this.fn = function () {}
}
var obj1 = new Obj("小明")
var boj2 = new Obj("小紅")
console.log(obj1.name)//小明
console.log(obj2.name)//小紅
console.log(obj1.fn == boj2.fn) //false
可以看到,建構函式的缺陷在於不能共享那些需要被共享的屬性,比如函式,每個例項化物件
中的方法都是獨立的,但函式的功能確是相同的,這樣就浪費了空間。
我們再來看看原型模式
原型模式相對於建構函式模式,實現了共享。
function Obj () {
}
Obj.prototype.name = "小明"
Obj.arr = [1,2]
Obj.prototype.fn = function (){
console.log(1)
}
var obj1 = new Obj();
var obj2 = new Obj();
console.log(obj1.fn == obj2.fn) //true
可以看到,通過原型物件,我們就實現了共享,
但這種模式也有一些弊端,不能傳參,並且所有的屬性都共享了,這就帶來了一個較大的問題。比如那些引用型別的值。
obj1.arr.push(3) console.log(obj1.arr) //[1,2,3] console.log(obj2.arr) //[1,2,3] 可以看到,原型中的陣列是共享的,如果我們不希望某些屬性是共享的,而又希望同時擁有一些共享的屬性, 那麼,將建構函式模式與原型模式組合起來使用,是你最佳的選擇。 function Obj (name) { this.name = name; this.arr = [1,2]; } Obj.prototype.fn = function (){ console.log(1) } var obj1 = new Obj("小明"); var obj2 = new Obj("小紅"); console.log(obj1.arr == obj2.arr) //false console.log(obj1.fn == obj2.fn) //true console.log(obj1.name)//小明 console.log(obj2.name)//小紅
可以看到,如此一來,就實現了部分屬性共享,而部分屬性獨立,還可以向建構函式傳參。這種方法可謂集兩種模式之長。