Javascript的對(duì)象創(chuàng)建方法

ZoomQuiet 發(fā)布于2019-08-21 11:36 / 1400人閱讀

摘要：構(gòu)造函數(shù)與原型組合利用構(gòu)造函數(shù)都是實(shí)例屬性和原型的共享特性，分別定義對(duì)應(yīng)的內(nèi)容，組合共同完成對(duì)象創(chuàng)建，而且該模式還支持想構(gòu)造函數(shù)傳遞參數(shù)。引用類(lèi)型為實(shí)例屬性寄生構(gòu)造模式構(gòu)造函數(shù)在不反回值的情況下，默認(rèn)會(huì)返回新對(duì)象實(shí)例。

創(chuàng)建對(duì)象 1.1 通過(guò)Object對(duì)象創(chuàng)建

var person = new Object();
person.name = "Albert";
person.sayName = function(){
    console.log(this.name);
};

1.2 通過(guò)字面量創(chuàng)建

var person = {
    name : "Albert",
    sayName : function(){
        console.log(this.name)
    }
};

Object和字面量創(chuàng)建的問(wèn)題：

創(chuàng)建很多對(duì)象的時(shí)候會(huì)產(chǎn)生大量重復(fù)代碼。

1.3 工廠模式

function createPerson(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        console.log(this.name)
    }
    return o;
}
var person = createPerson("Albert");

工廠模式的問(wèn)題：

無(wú)法識(shí)別對(duì)象類(lèi)型，即無(wú)法通過(guò)instanceof和constructor來(lái)識(shí)別對(duì)象類(lèi)型：

person instanceof ???;
person.constructor == ???;

1.4 構(gòu)造函數(shù)

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}
var person = new Person("Albert");
console.log(person.constructor == Person)//true
console.log(person instanceof Person)//true

構(gòu)造函數(shù)的問(wèn)題：

每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一次，尤其是函數(shù)，這樣每個(gè)Person的實(shí)例都包含了一個(gè)不同的sayName的函數(shù)實(shí)例。

注意1
構(gòu)造函數(shù)沒(méi)有return語(yǔ)句。要?jiǎng)?chuàng)建Person的新實(shí)例，必須采用new操作符，new操作符大體上完成了一下4件事情：

創(chuàng)建一個(gè)新的對(duì)象（本例中Person創(chuàng)建的新對(duì)象，記為person）;

將構(gòu)造函數(shù)的作用域賦給新對(duì)象（this=>person）;

執(zhí)行構(gòu)造函數(shù)中的代碼（Person中的this.name=name;this.say.....）;

返回新對(duì)象

注意2
構(gòu)造函數(shù)也是函數(shù)，如果不通過(guò)new操作符調(diào)用，則作用環(huán)境為全局（瀏覽器中為windows，node環(huán)境中為global）

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}

Person("BB");
global.sayName()//BB
console.log(global.name)//BB

1.5 原型模式

function Person(name){}
Person.prototype.name = "Albert";
Person.prototype.sayName = function(){
        console.log(this.name)
    }

var person = new Person();
console.log(Object.getPrototypeOf(person)==Person.prototype);//true

瀏覽器支持：IE9+，這樣所有的Person實(shí)例共享name屬性及sayName函數(shù)

注意1

對(duì)象的某個(gè)屬性是否來(lái)自實(shí)例，可通過(guò)hasOwnProperty()來(lái)確定,如果是在原型中，則返回false。

判斷對(duì)象是否具備屬性，可以通過(guò)in操作符，例如console.log("name" in person)//true來(lái)判斷，不論是在原型還是實(shí)例中，都返回true，通過(guò)for-in循環(huán)時(shí)，實(shí)例及原型中均會(huì)被枚舉。

注意2
在定義原型時(shí)，如果用字面量代替為prototype屬性定義，則原型的constructor屬性不會(huì)指向Person。因?yàn)橥ㄟ^(guò)字面量定義，完全重寫(xiě)了默認(rèn)的prototype對(duì)象。但是此時(shí)instanceof還是能夠返回正確的結(jié)果。

function Person(name){};
Person.prototype={
    name : "Albert",
    sayName : function(){
        console.log(this.name);
    }
};
var person = new Person();
console.log(person instanceof Person);//true
console.log(person.constructor == Person);//false
console.log(person.constructor == Object);//true

所以可以再補(bǔ)充定義：

Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    value:Person
})

注意3
在重定義原型前，不能創(chuàng)建對(duì)象實(shí)例，否則會(huì)造成實(shí)例的原型指向錯(cuò)誤

function Person(name){};
var person = new Person();
Person.prototype={
    name : "Albert",
    sayName : function(){
        console.log(this.name);
    }
};
person.sayName(); //error

此例中person的原型被指向了Person的默認(rèn)原型，固調(diào)用sayName函數(shù)會(huì)發(fā)生錯(cuò)誤。

原型模式的問(wèn)題：

小問(wèn)題：為了省略構(gòu)造函數(shù)傳遞初始化參數(shù)，所有的實(shí)例在默認(rèn)情況下都會(huì)去的想通的屬性值

原型屬性被所有實(shí)例共享（適合function類(lèi)型的值），而通常情況下，引用類(lèi)型（Array、Object）屬性值一般不希望對(duì)所有實(shí)例共享。

1.6 構(gòu)造函數(shù)與原型組合

利用構(gòu)造函數(shù)都是實(shí)例屬性和原型的共享特性，分別定義對(duì)應(yīng)的內(nèi)容，組合共同完成對(duì)象創(chuàng)建，而且該模式還支持想構(gòu)造函數(shù)傳遞參數(shù)。

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//引用類(lèi)型為實(shí)例屬性
};
Person.prototype.sayName = function(){
        console.log(this.name);
};

1.7 動(dòng)態(tài)原型模式

將1.6中的組合封裝在一個(gè)構(gòu)造函數(shù)中的模式。具體方法為：檢查某個(gè)應(yīng)該存在的方法是否有效來(lái)決定是否需要初始化原型。

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//引用類(lèi)型為實(shí)例屬性
    //****ProtoType****
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    }
};

1.8 寄生構(gòu)造模式

構(gòu)造函數(shù)在不反回值的情況下，默認(rèn)會(huì)返回新對(duì)象實(shí)例。
而通過(guò)在函數(shù)末尾添加return語(yǔ)句，可以重寫(xiě)new后調(diào)用函數(shù)時(shí)的返回值。

function Person(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
};
var person = new Person("Albert");
console.log(person instanceof Person);//false

該函數(shù)除了使用new操作符和把包裝函數(shù)取名叫“構(gòu)造函數(shù)”以外，和工廠模式其實(shí)是一模一樣的。
該模式屬于比較特殊的構(gòu)造模式，可用于不允許修改原對(duì)象的情況。

function SpecialArray(){
    var values = new Array();
    values.push.apply(values,arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values
}

1.9 穩(wěn)妥（durable）構(gòu)造函數(shù)模式

該模式構(gòu)造出來(lái)的對(duì)象沒(méi)有公共屬性，不適用this對(duì)象，不適用new操作符，適用于在一些安全環(huán)境中，可防止數(shù)據(jù)被其它應(yīng)用（如Mashup）改動(dòng)（利用閉包特性），類(lèi)似于寄生構(gòu)造函數(shù)模式，單不適用this和new。

function Person(name){
    var o = new Object();
    //****定義私有變量和函數(shù)****
    var _name = name;
    o.sayName = function(){
        console.log(_name);
    };    
    return o;
};
var person = Person("Albert");

這種模式中，除了sayName()方法以外，沒(méi)有其它辦法訪問(wèn)_name的值。