1. 程式人生 > >建構函式模式與原型模式的組合使用

建構函式模式與原型模式的組合使用

建構函式模式

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)//小紅

可以看到,如此一來,就實現了部分屬性共享,而部分屬性獨立,還可以向建構函式傳參。這種方法可謂集兩種模式之長。