JavaScript創(chuàng)建對(duì)象

張巨偉發(fā)布于2019-08-26 11:50 / 3291人閱讀

摘要：對(duì)象字面量小李我叫今年歲工廠模式但是，雖然構(gòu)造函數(shù)和對(duì)象字面量可以用來(lái)創(chuàng)建單個(gè)對(duì)象，但是這樣創(chuàng)建對(duì)象會(huì)產(chǎn)生大量的重復(fù)代碼。構(gòu)造函數(shù)模式在中的構(gòu)造函數(shù)可以創(chuàng)建特定類(lèi)型的對(duì)象。

調(diào)用系統(tǒng)的構(gòu)造函數(shù)

創(chuàng)建一個(gè)最簡(jiǎn)單的方式就是創(chuàng)建一個(gè)Object的實(shí)例，如下：

    // 1. 調(diào)用系統(tǒng)的構(gòu)造函數(shù)
    var person = new Object();

    // 添加屬性
    person.name = "小李";
    person.age = 22;
    person.sex = "F";

    // 添加方法
    person.eat = function () {
        console.log("我喜歡吃油炸榴蓮.")
    };

    person.play = function () {
        console.log("我喜歡玩電子游戲.")
    };

    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
    };    
    
    person.introduce();        // 輸出：我叫小李, 今年22歲.

上面的代碼創(chuàng)建了一個(gè)名為object的對(duì)象，并為它添加了三個(gè)屬性和三個(gè)方法。

對(duì)象字面量

var person = {
    name: "小李",
    age: 22,
    sex: "F",
    introduce: function() {
        console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
    }
}

工廠模式

但是，雖然Object構(gòu)造函數(shù)和對(duì)象字面量可以用來(lái)創(chuàng)建單個(gè)對(duì)象，但是這樣創(chuàng)建對(duì)象會(huì)產(chǎn)生大量的重復(fù)代碼。于是人們開(kāi)始使用工廠模式。如下：

function createPerson(name, age, sex) {
    var object = new Object();
    person.name = "小李";
    person.age = 22;
    person.sex = "F";
    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
    };
    
    return person;
}

var person0 = createPerson("小蘇", "21", "M");
var person1 = createPerson("鐵子", "27", "M");

函數(shù)createPerson()能夠根據(jù)接受的參數(shù)來(lái)構(gòu)建一個(gè)包含所有信息的Person對(duì)象。可以無(wú)數(shù)次地調(diào)用這個(gè)函數(shù)，而每次它都會(huì)返回一個(gè)包含三個(gè)屬性和一個(gè)方法的對(duì)象。工廠模式雖然解決了創(chuàng)建多個(gè)類(lèi)似對(duì)象導(dǎo)致的代碼大量重復(fù)的問(wèn)題，但卻沒(méi)有解決對(duì)象識(shí)別的問(wèn)題，即如何知道一個(gè)對(duì)象的類(lèi)型。隨著JavaScript的發(fā)展，又一個(gè)新的模式出現(xiàn)了，那就是構(gòu)造函數(shù)模式。

構(gòu)造函數(shù)模式

在ECMAScript中的構(gòu)造函數(shù)可以創(chuàng)建特定類(lèi)型的對(duì)象。像Object對(duì)象和Array對(duì)象這樣的原生構(gòu)造函數(shù)，在運(yùn)行的時(shí)候回自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中。此外我們也可以自定義構(gòu)造函數(shù)，從而自定義對(duì)象的類(lèi)型和方法。例如，前面的例子可以用自動(dòng)以構(gòu)造函數(shù)重寫(xiě)為以下的代碼：

function Person(name, age, sex) {
    this.name = name;
    this.age  = age;
    this.sex  = sex;
    
    this.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "歲.");
    };
}

var person0 = new Person("小蘇", "21", "M");
var person1 = new Person("鐵子", "27", "M");

要?jiǎng)?chuàng)建一個(gè)Person的新實(shí)例，必須使用new操作符。這種操作方式調(diào)用構(gòu)造函數(shù)實(shí)際上會(huì)經(jīng)歷一下4個(gè)過(guò)程：

創(chuàng)建一個(gè)新對(duì)象；

將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this就指向了這個(gè)新對(duì)象）；

執(zhí)行構(gòu)造函數(shù)中的代碼；

返回這個(gè)新對(duì)象。

工廠模式和構(gòu)造函數(shù)的區(qū)別

構(gòu)造函數(shù)沒(méi)有顯式地創(chuàng)建對(duì)象；

構(gòu)造函數(shù)直接將屬性和方法賦給了this對(duì)象；

構(gòu)造函數(shù)沒(méi)有return語(yǔ)句，即沒(méi)有返回值；

構(gòu)造函數(shù)首字母需要大寫(xiě)。