Javascript 對象(二)

javascript(一)? 這是入門級別的講解


一、面向對象語言的要求

一種面向對象語言需要向開發者提供四種基本能力:

封裝 - 把相關的信息(無論數據或方法)存儲在對象中的能力

聚集 - 把一個對象存儲在另一個對象內的能力

繼承 - 由另一個類(或多個類)得來類的屬性和方法的能力

多態 - 編寫能以多種方法運行的函數或方法的能力

ECMAScript 支持這些要求,因此可被是看做面向對象的。

二、ECMAScript 對象類型

本地對象、內置對象、宿主對象

三、ECMAScript 對象作用域

作用域指的是變量的適用范圍

四、ECMAScript 定義類或對象


備注:了解以下內容的時候請對前面羅列的4點有所了解。

第一種:Object構造函數創建

var ?Person =new ?Object();

Person.name = 'HeFan';

Person.age = 24;

創建了Object引用類型的一個新實例,然后把實例保存在變量Person中,name和age是對象屬性。

第二種:使用對象字面量表示法

var Person = {};//相當于var Person = new Object();

var Person ={

name:'HeFan';

age:24;

}

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

在介紹第三種的創建方法之前,我們應該要明白為什么還要用別的方法來創建對象,也就是第一種,第二種方法的缺點所在:它們都是用了同一個接口創建很多對象,會產生大量的重復代碼,就是如果你有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函數中,返回的是一個對象。那么我們就無法判斷返回的對象究竟是一個什么樣的類型。于是就出現了第四種創建對象的模式。

第四種:使用構造函數創建對象

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

? ? ? ? ? ? ? alert(this.name);

? ? ? ? ? ? };

}

var person1 = new ?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 =newPerson();

person1.sayName();

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

如果是使用原型創建對象模式,請看下面代碼

function Person(){}

Person.prototype.name= 'Nike';

Person.prototype.age= 20;

Person.prototype.jbo= 'teacher';

Person.prototype.sayName=function(){

alert(this.name);

};

varperson1 =newPerson();

varperson2 =newPerson();

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');

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

原文地址:http://www.cnblogs.com/zxza/p/6479070.html

推薦學習地址:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html (阮)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評論 6 540
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,275評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,368評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,736評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,919評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,481評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,235評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,427評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,656評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,160評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,380評論 2 379

推薦閱讀更多精彩內容