JS創(chuàng)建對象的幾種常用方式

一、通過new Object()創(chuàng)建對象。

var obj = new Object();
obj.name = "王者";
obj.age = 18;
obj.sex = "男";
obj.eat = function() {
    console.log("午飯要吃啥!");
}
console.log(obj);
運行結(jié)果.png

二、通過對象字面量創(chuàng)建對象。

var obj = {
    name: "王者",
    age: 18,
    sex: "男",
    eat: function() {
        console.log("晚飯要吃啥!");
    }
};
console.log(obj);
obj.eat();
運行結(jié)果.png

以上兩種方式,適合創(chuàng)建單個對象,如果要創(chuàng)建多個類似的對象,可以采用第三種方式創(chuàng)建。

三、通過工廠模式創(chuàng)建對象。

function createObj(name, age, sex) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    obj.eat = function() {
        console.log("午餐吃糖醋排骨!");
    }
    return obj;
}
var p1 = createObj("麗麗", 20, "女");
var p2 = createObj("明明", 23, "男");
console.log(p1);
console.log(p2);
運行結(jié)果.png

雖然使用工廠模式可以解決創(chuàng)建多個相似對象的問題,但是存在一個問題,我們無法知道對象具體的類型。

四、通過構(gòu)造函數(shù)創(chuàng)建對象。

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function() {
        console.log("大家好,我是" + this.name);
    }
}
var p1 = new Person("麗麗", 18, "女");
p1.sayHi();
運行結(jié)果.png

使用構(gòu)造函數(shù)來創(chuàng)建對象,解決了對象識別的問題,但是也有缺點:每個方法都要在每個實例上重新創(chuàng)建一遍,造成了不必要的資源浪費。

五、通過原型創(chuàng)建對象。

兩種方式實現(xiàn)

方式一:
function Person() {};
    Person.prototype.name = "麗麗";
    Person.prototype.age = 19;
    Person.prototype.sex = "女";
    Person.prototype.sayHi = function() {
        console.log("大家好,我是" + this.name);
    }
    var p = new Person();
    p.sayHi();

方式二:
function Person() {};
Person.prototype = {
    constructor : Person,
    name: "麗麗",
    age: 19,
    sex: "女",
    sayHi: function() {
        console.log("大家好,我是" + this.name);
    }
}
var p = new Person();
p.sayHi();
運行結(jié)果.png

使用原型創(chuàng)建對象,可以讓所有的實例對象共享它所包含的屬性和方法,不必在構(gòu)造函數(shù)中定義對象實例信息,而是可以將這些信息直接添加到原型對象中。但也有缺點:無法傳參。

六、通過構(gòu)造函數(shù)+原型創(chuàng)建對象。

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
};
Person.prototype.sayHi = function() {
    console.log("大家好,我是" + this.name);
}
var p1 = new Person("小麗", 25, "女");
var p2 = new Person("小華", 30, "男");
p1.sayHi();
p2.sayHi();
運行結(jié)果.png

此方式創(chuàng)建對象,我們將不共享的屬性放在構(gòu)造函數(shù)中,需要共享的屬性或方法放在原型中,解決了傳參和數(shù)據(jù)共享的問題。該方法也是使用最廣泛的一種創(chuàng)建自定義對象的方式。
以上是自己總結(jié)的JS創(chuàng)建對象的一些常用方式,若有不當(dāng)之處,請指教!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容