javascript如何建立一個物件？-js教程-PHP中文網

javascript創建一個物件的方法：1、使用new關鍵字呼叫建構器創建物件；2、利用工廠方法創建物件；3、利用建構函式方法創建物件；4、利用原型方法創建物件； 5.利用混合的建構子/原型方式創建物件；6、利用動態原型方法創建物件。

javascript如何建立一個物件？

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

我們可以利用JavaScript的語法特徵，以類別的想法建立物件。

方法一：原始方法--使用new關鍵字呼叫建構器建立物件

程式碼如下：

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

登入後複製

這種方法透過new關鍵字產生一個對象，然後根據JavaScript是動態語言的特性來添加屬性和方法，構造一個對象。其中的this表示呼叫該方法的物件。

這種方法的問題在於：如果我們需要多次建立對象，那麼就需要重複程式碼多次，不利於程式碼的重複使用。

方法二：工廠方法

#程式碼如下：

<script>
    function createObj(){
        var obj = new Object();//创建对象
        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>

登入後複製

這種方法雖然也實現了創建對象，但是同樣地，如果需要多次創建對象，而且屬性內容不一樣的話，也是需要重複代碼多遍。需要重新考慮程式碼重用率，接下來修改程式碼，使其可以提高程式碼重複率，而且可以改變工廠方法，傳入參數賦值。

改進程式碼如下：

<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>

登入後複製

此方法雖然可以提高程式碼的重複使用率，但和物件導向中類別的概念相比，有一個很大的缺陷。物件導向強調物件的屬性私有，但物件的方法是共享。而上面的工廠方法在建立物件時，要為每個物件建立各自私有的方法。同時，由於為每個物件創建邏輯相同的方法，所以很浪費記憶體。

改進程式碼如下：

<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>

登入後複製

上面透過定義幾個函數對象，解決了不同物件持有函數物件的私有問題。現在所有物件的方法都持有上面兩個函數的參考。但是這麼一來，物件的函數和物件又相互獨立，這和物件導向中特定方法屬於特定類別的思想不符合。

方法三：建構子方法

#程式碼如下：

<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>

登入後複製

建構函數的方法和工廠方法一樣，會為每個物件創造獨享的函數物件。當然也可以將這些函數物件定義在建構函式外面，有了物件和方法相互獨立的問題。

使用建構子存在的最大問題就是每個實例都會將所有的屬性建立一次。這個對於數值屬性來說可以接受，但是如果函數方法每個實例都要創建一遍，則不合理。

若要建立Person()的新實例，必須使用new運算元。以這種方式呼叫建構函式其實會經歷以下四個步驟：

创建一个新对象；
将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。

方法四：原型方法

代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予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>

登入後複製

当生成Person对象时，prototype的属性都赋给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题。

修改代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予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属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj2.showArray();//Kitty,luo,Wendy
</script>

登入後複製

上面的代码通过obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型方法定义对象的方法，这样就可以做到属性私有，而方法共享。

方法五：混合的构造函数/原型方式

代码如下：

<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属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

登入後複製

属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

方法六：动态原型方法

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person对象中_initialized 为undefined，表明还没有为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属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

登入後複製

这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。

更多编程相关知识，请访问：编程视频！！

以上是javascript如何建立一個物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！