首頁 > web前端 > js教程 > 主體

對JS關於物件創建的幾種方式總結

迷茫
發布: 2017-03-26 17:49:20
原創
1141 人瀏覽過

最近一直在看JS高階程式設計這本書,有空來整理一下幾種創建物件的方式。話不多說,直接步入正題。

第一種:Object建構子建立

 Person =  Object();
登入後複製

這行程式碼建立了Object引用類型的新實例,然後把實例保存在變數Person中。

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

 Person ='Nike'29
登入後複製

物件字面量是物件定義的一種簡寫形式,目的在於簡化建立包含大量屬性的物件的過程。也就是說,第一種和第二種方式創建物件的方法其實都是一樣的,只是寫法上的區別不同

在介紹第三種的創建方法之前,我們應該要明白為什麼還要用別的方法來創建對象,也就是第一種,第二種方法的缺點所在:它們都是用了同一個接口創建很多對象,會產生大量的重複代碼,就是如果你有100個對象,那你要輸入100次很多相同的程式碼。那我們有什麼方法來避免過多的重複程式碼呢,就是把創建物件的過程封裝在函數體內,透過函數的呼叫直接產生物件。

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

function createPerson(name,age,job){    
   var o  = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
         alert(this.name);    
    };    return o;      
}var person1 = createPerson('Nike',29,'teacher');var person2 = createPerson('Arvin',20,'student');
登入後複製

在使用工廠模式建立物件的時候,我們都可以注意到,在createPerson函數中,傳回的是一個物件。那麼我們就無法判斷傳回的物件究竟是什麼樣的類型。於是就出現了第四種創建物件的模式。

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

.name =.age =.job =.sayName =  person1 =  Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
登入後複製

對比工廠模式,我們可以發現以下差異:

  1.沒有顯示地建立物件

#  2.直接將屬性和方法賦給了this物件

  3.沒有return語句

  4.終於可以辨識的物件的型別。對於檢測物件類型,我們應該使用instanceof操作符,我們來進行自主檢測:

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
登入後複製

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

那麼建構子確實挺好用的,但是它也有它的缺點:

  就是每個方法都要在每個實例上重新創建一遍,方法指的就是我們在物件裡面定義的函數。如果方法的數量很多,就會佔用很多不必要的記憶體。於是出現了第五種創建物件的

方法

第五種:原型建立物件模式

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};var person1 = new Person();
person1.sayName();
登入後複製

使用原型建立物件的方式,可以讓所有物件實例共享它所包含的屬性和方法。

如果是使用原型建立物件模式,請看下面程式碼:

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name);  //'Greg'  --来自实例
alert(person2.name);  //'Nike'   --来自原型
登入後複製

當為物件實例新增一個屬性時,這個屬性就會屏蔽原型物件中儲存的同名屬性。

這時候我們就可以使用建構子模式與原型模式結合的方式,建構函式模式用來定義實例屬性,而原型模式用來定義方法和共享的屬性

第八種:組合使用建構函數模式和原型模式

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

Person.prototype = {
    constructor:Person,
    sayName: function(){
        alert(this.name);
    };
}var person1 = new Person('Nike',20,'teacher');
登入後複製

以上就是我所總結的八種創建物件的方式,如有誤差,請望指出。

以上是對JS關於物件創建的幾種方式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!