javascript創(chuàng)建一個(gè)對(duì)象的方法

這篇文章主要介紹“javascript創(chuàng)建一個(gè)對(duì)象的方法”，在日常操作中，相信很多人在javascript創(chuàng)建一個(gè)對(duì)象的方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript創(chuàng)建一個(gè)對(duì)象的方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

javascript創(chuàng)建一個(gè)對(duì)象的方法：1、使用new關(guān)鍵字調(diào)用構(gòu)造器創(chuàng)建對(duì)象；2、利用工廠方法創(chuàng)建對(duì)象；3、利用構(gòu)造函數(shù)方法創(chuàng)建對(duì)象；4、利用原型方法創(chuàng)建對(duì)象；5、利用混合的構(gòu)造函數(shù)/原型方式創(chuàng)建對(duì)象；6、利用動(dòng)態(tài)原型方法創(chuàng)建對(duì)象。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

我們可以利用JavaScript的語(yǔ)法特征，以類的思想來(lái)創(chuàng)建對(duì)象。

方法一：原始方法--使用new關(guān)鍵字調(diào)用構(gòu)造器創(chuàng)建對(duì)象

代碼如下：

<script>
    var obj = new Object();
    obj.name = "Kitty";//為對(duì)象增加屬性
    obj.age = 21;
    obj.showName = function () {//為對(duì)象添加方法
        console.log(this.name);
    };
    obj.showAge = function(){
        console.log(this.age);
    };
    obj.showName();
    obj.showAge();
</script>

    這種方法通過(guò)new關(guān)鍵字生成一個(gè)對(duì)象，然后根據(jù)JavaScript是動(dòng)態(tài)語(yǔ)言的特性來(lái)添加屬性和方法，構(gòu)造一個(gè)對(duì)象。其中的this表示調(diào)用該方法的對(duì)象。

     這種方法的問(wèn)題在于：如果我們需要多次創(chuàng)建對(duì)象，那么就需要重復(fù)代碼多次，不利于代碼的復(fù)用。

方法二：工廠方法

代碼如下：

<script>
    function createObj(){
        var obj = new Object();//創(chuàng)建對(duì)象
        obj.name = "Kitty";
        obj.age = "21";
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function () {
            console.log(this.age);
        };
        return obj;
    }
 
    var obj1 = createObj();
    var obj2 = createObj();
 
    obj1.showName();
    obj1.showAge();
 
    obj2.showName();
    obj2.showAge();
</script>

      這種方法雖然也實(shí)現(xiàn)了創(chuàng)建對(duì)象，但是同樣地，如果需要多次創(chuàng)建對(duì)象，而且屬性內(nèi)容不一樣的話，也是需要重復(fù)代碼多遍。需要重新考慮代碼重用率，接下來(lái)修改代碼，使其可以提高代碼重復(fù)率，而且可以改變工廠方法，傳入?yún)?shù)賦值。

改進(jìn)代碼如下：

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function(){
            console.log(this.age);
        };
 
        return obj;
    }
 
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

     這種方法雖然可以提高代碼的重用率，但和面向?qū)ο笾蓄惖母拍钕啾?，有一個(gè)很大的缺陷。面向?qū)ο髲?qiáng)調(diào)對(duì)象的屬性私有，但對(duì)象的方法是共享。而上面的工廠方法在創(chuàng)建對(duì)象時(shí)，要為每個(gè)對(duì)象創(chuàng)建各自私有的方法。同時(shí)，由于為每個(gè)對(duì)象都創(chuàng)建邏輯相同的方法，所以很浪費(fèi)內(nèi)存。

改進(jìn)代碼如下：

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = showName;
        obj.showAge = showAge;
        return obj;
    }

    function showName(){
        console.log(this.name);
    }
    function showAge(){
        console.log(this.age);
    }
    
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>

    上面通過(guò)定義幾個(gè)函數(shù)對(duì)象，解決了不同對(duì)象持有函數(shù)對(duì)象的私有問(wèn)題。現(xiàn)在所有對(duì)象的方法都持有上面兩個(gè)函數(shù)的引用。但是這么一來(lái)，對(duì)象的函數(shù)和對(duì)象又相互獨(dú)立，這和面向?qū)ο笾刑囟ǚ椒▽儆谔囟惖乃枷氩环稀?/p>

方法三：構(gòu)造函數(shù)方法

代碼如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
 
        this.showName = function () {
            console.log(this.name);
        };
        this.showAge = function () {
            console.log(this.age);
        };
    }
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

    構(gòu)造函數(shù)的方法和工廠方法一樣，會(huì)為每個(gè)對(duì)象創(chuàng)建獨(dú)享的函數(shù)對(duì)象。當(dāng)然也可以將這些函數(shù)對(duì)象定義在構(gòu)造函數(shù)外面，這樣有了對(duì)象和方法相互獨(dú)立的問(wèn)題。

    使用構(gòu)造函數(shù)存在的最大問(wèn)題就是每個(gè)實(shí)例都會(huì)將所有的屬性創(chuàng)建一次。這個(gè)對(duì)于數(shù)值屬性來(lái)說(shuō)可以接受，但是如果函數(shù)方法每個(gè)實(shí)例都要?jiǎng)?chuàng)建一遍，則不合理。

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

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

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

• 執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對(duì)象添加屬性）；

• 返回新對(duì)象。

方法四：原型方法  

代碼如下：

<script>
    function Person(){} //定義一個(gè)空構(gòu)造函數(shù)，且不能傳遞參數(shù)
    //將所有的屬性的方法都賦予prototype
    Person.prototype.name = "Kitty";
    Person.prototype.age = 21;
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
 
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

     當(dāng)生成Person對(duì)象時(shí)，prototype的屬性都賦給了新的對(duì)象。那么屬性和方法是共享的。首先，該方法的問(wèn)題是構(gòu)造函數(shù)不能傳遞參數(shù)，每個(gè)新生成的對(duì)象都有默認(rèn)值。其次，方法共享沒(méi)有任何問(wèn)題，但是，當(dāng)屬性是可改變狀態(tài)的對(duì)象時(shí)，屬性共享就有問(wèn)題。

修改代碼如下：

<script>
    function Person(){} //定義一個(gè)空構(gòu)造函數(shù)，且不能傳遞參數(shù)
    //將所有的屬性的方法都賦予prototype
    Person.prototype.age = 21;
    Person.prototype.array = new Array("Kitty","luo");
 
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person();
    var obj2 = new Person();
    obj1.array.push("Wendy");//向obj1的array屬性添加一個(gè)元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj2.showArray();//Kitty,luo,Wendy
</script>

    上面的代碼通過(guò)obj1的屬性array添加元素時(shí)，obj2的array屬性的元素也跟著受到影響，原因就在于obj1和obj2對(duì)象的array屬性引用的是同一個(gè)Array對(duì)象，那么改變這個(gè)Array對(duì)象，另一引用該Array對(duì)象的屬性自然也會(huì)受到影響，混合的構(gòu)造函數(shù)/原型方式使用構(gòu)造函數(shù)定義對(duì)象的屬性，使用原型方法定義對(duì)象的方法，這樣就可以做到屬性私有，而方法共享。

方法五：混合的構(gòu)造函數(shù)/原型方式

代碼如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
    }
 
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array屬性添加一個(gè)元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

     屬性私有后，改變各自的屬性不會(huì)影響別的對(duì)象。同時(shí)，方法也是由各個(gè)對(duì)象共享的。在語(yǔ)義上，這符合了面向?qū)ο缶幊痰囊蟆?/p>

方法六：動(dòng)態(tài)原型方法

代碼如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person對(duì)象中_initialized 為undefined，表明還沒(méi)有為Person的原型添加方法
        if(typeof Person._initialized  == "undefined"){
            Person.prototype.showName = function () {
                console.log(this.name);
            };
            Person.prototype.showArray = function () {
                console.log(this.array);
            };
            Person._initialized = true;
        }
    }
 
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array屬性添加一個(gè)元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

這種方法和構(gòu)造函數(shù)/原型方式大同小異。只是將方法的添加放到了構(gòu)造函數(shù)之中，同時(shí)在構(gòu)造函數(shù)Person上添加了一個(gè)屬性用來(lái)保證if語(yǔ)句只能成功執(zhí)行一次，在實(shí)際應(yīng)用中，采用最廣泛的構(gòu)造函數(shù)/原型方法。動(dòng)態(tài)原型方法也很流行，它在功能上和構(gòu)造函數(shù)/原型方法是等價(jià)的。不要單獨(dú)使用構(gòu)造函數(shù)和原型方法。

到此，關(guān)于“javascript創(chuàng)建一個(gè)對(duì)象的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！