1. 程式人生 > >js 建立物件的幾種方式總結

js 建立物件的幾種方式總結

第一種 建構函式建立

    var Person = new Object();
    Person.name = 'nike';
    Person.age  = 29;
    console.log(Person)

這串程式碼建立了Object 引用型別的一個新例項,然後把例項儲存在Person 變數中。

第二種 使用物件字面量表示法

    var Person = {
        name: 'nike',
        age: 29
    }
    console.log(Person)

物件字面量是,定義物件的一種簡寫形式,目的在於簡化建立大量屬性的物件的過程,也就是說第一種建立物件的方法和第二種建立物件的方法都是一樣的,只是寫法上的不同;
在介紹第三種建立方法之前,我們要先明白為什麼還要用別的方法來建立物件,也就是第一種和第二種方法的缺點所在。他們都是用了同一個介面建立了很對物件,會產生大量的重複程式碼,如果我們要建立100個物件,就要輸入100次很多相同的程式碼

。所以我們可以吧建立函式的過程封裝在函式中,通過呼叫函式來生成物件

第三種 使用工廠模式來建立物件

    function creatPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age  = age;
        o.sayName = function(){
            console.log(this.name)
        }
        return o;
    }

    var person1 = creatPerson('nike', 29, 'teacher');
    var person2 = creatPerson('arvin', 20 , 'student');
    
    console.log(person1);
    console.log(person2);

在使用工廠模式建立物件的時候,我們可以注意到,在creatPerson 函式中返回的是一個物件,但是我們無法判斷返回的物件究竟是一個什麼型別,於是就出現了第四種建立物件的模式。

第四種 使用建構函式建立物件

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

    var person1 = new Person('nike', 29, 'teacher');
    var person2 = new Person('arvin', 20, 'student');

    console.log(person1);
    console.log(person2);

對比工廠模式,我們可以發現
1,沒有顯示的建立物件。
2,直接將屬性和方法賦值給了this物件。
3,沒有return 語句。
4,可以識別物件的型別了,對於檢測物件的型別,這裡我們使用 instanceof 操作符,我們來進行自主檢測

	console.log(person1 instanceof Object);//ture
	console.log(person1 instanceof Person);//ture
	console.log(person2 instanceof Object);//ture
	console.log(person2 instanceof Person);//ture

同時我們也應該明白,按照慣例,建構函式始終應該要用一個大寫字母開頭,而非建構函式應該以一個小寫字母開頭。

雖然建構函式很好用,但是還是有缺點的。
就是每個方法都要在每個例項上重新建立一遍,方法指的就是我們在物件裡邊定義的函式,如果方法的數量很多,就會佔用很多不必要的記憶體,於是出現了第五種建立物件的方法。

第五種 原型建立物件模式

    function Person(){}
    Person.prototype.name = 'nike';
    Person.prototype.age  = 20;
    Person.prototype.job  = 'teacher';
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
    var person1 = new Person();
    person1.sayName();

使用原型建立物件的方式,可以讓所有物件例項共享它所包含的屬性和方法。
如果是使用原型建立物件模式,請看下邊程式碼。

    function Person(){};
    Person.prototype.name = 'nike';
    Person.prototype.age  = 20;
    Person.prototype.job  = 'teacher';
    Person.prototype.sayName = function(){
        console.log(this.name);
    }

    var person1 = new Person();
    var person2 = new Person();
    person1.name = 'greg';
    console.log(person1.name); //greg  --來自例項
    console.log(person2.name); //nike  --來自原型

當為物件例項新增一個屬性時,這個屬性就會遮蔽掉原型物件中儲存的同名屬性。
這時候我們就可以通過使用建構函式模式,和原型模式結合的方式,建構函式用於定義例項屬性,而原型模式用於定義方法和共享的屬性
第六種 組合使用建構函式模式和原型模式

    function Person(name, age, job) {
        this.name = name;
        this.age  = age;
        this.job  = job;
    }
    Person.prototype = {
        constructor: Person,
        sayName: function(){
            console.log(this.name);
        }
    }

    var person1 = new Person('nike', 20, 'teacher');
    person1.sayName()