JavaScript學(xué)習(xí)筆記之創(chuàng)建對象
JavaScript 有Date、Array、String等這樣的內(nèi)置對象,功能強(qiáng)大使用簡單,人見人愛,但在處理一些復(fù)雜的邏輯的時(shí)候,內(nèi)置對象就很無力了,往往需要開發(fā)者自定義對象。
從JavaScript定義上講對象是無序?qū)傩缘募?,其屬性可以包含基本值、對象或函?shù)。也就是說對象是一組沒有特定順序的屬性,每個(gè)屬性會(huì)映射到一個(gè)值上,是一組鍵值對,值可以是數(shù)據(jù)或?qū)ο蟆?/p>
對象是JavaScript的基本數(shù)據(jù)類型。在JavaScript中除了字符串、數(shù)字、true、false、null和undefined之外的值都是對象。所以,學(xué)習(xí)JavaScript不把對象學(xué)習(xí)明白要繼續(xù)往下學(xué)習(xí)就非常的困難。從今天開始進(jìn)入對象的學(xué)習(xí)中。
概述
在JavaScript中對象是一種基本的數(shù)據(jù)類型,在數(shù)據(jù)結(jié)構(gòu)上是一種散列表,可以看作是屬性的無序集合,除了原始值其他一切都是對象??赏ㄟ^屬性名訪問這些值,而屬性名可以是包含空字符在內(nèi)的任意字符串。簡單點(diǎn)說,一個(gè)對象就是一系列屬性的集合,一個(gè)屬性包含一個(gè)名字(key)和一個(gè)值(value)。
理解什么是JavaScript對象,你可以這樣來想。在JavaScript中,一個(gè)對象就是一個(gè)具有屬性的特體。就拿你看到的一妹子,這妹子就是一個(gè)對象,她有自己的屬性。比如妹子身高,年齡,姓名等。同樣,在JavaScript中,也可以用屬性來給對象定義它的特征。
創(chuàng)建對象
既然要學(xué)習(xí)對象,那得先要有一個(gè)對象,這樣問題就來了,JavaScript中對象要怎么創(chuàng)建呢?接下來就來看看在JavaScript中如何創(chuàng)建對象。
很多有關(guān)于JavaScript書在介紹對象創(chuàng)建的方法時(shí),主要有:
使用對象字面量創(chuàng)建對象(key-value)
使用new創(chuàng)建對象
使用Object.create()創(chuàng)建對象
使用函數(shù)創(chuàng)建對象
使用原型創(chuàng)建對象
使用對象字面量創(chuàng)建對象
對象字面量是創(chuàng)建對象最簡單的一種形式,目的是在于簡化創(chuàng)建包含大量屬性的對象的過程。對象字面量由若干屬性名(keys)和屬性值(values)成對組成的映射表,key和value中間使用冒號(:)分隔,每對key/value之間使用逗號(,)分隔,整個(gè)映射表用花括號({})括起來。
通過對象字面量創(chuàng)建對象的語法如下:
var obj = { property_1: value_1, // property_# 可能是一個(gè)標(biāo)識符... 2: value_2, // 或者是一個(gè)數(shù)字 // ..., "property n": value_n // 或是一個(gè)字符串 };
這里obj是創(chuàng)建的對象的名稱,每一個(gè)property_i是一個(gè)標(biāo)識符(可以是一個(gè)名稱、數(shù)字或字符串字面量),并且每個(gè)value_i是一個(gè)其值,并且將這個(gè)值賦予給property_i。來看一個(gè)具體實(shí)例:
var girl = { 'name': '欣欣', 'age' : 18, 'height': 175, 'weight': 45 }
這個(gè)示例創(chuàng)建了一個(gè)名為girl的對象,對象有四個(gè)屬性name、age、height和weight。這四個(gè)屬性對應(yīng)有一個(gè)屬性值。
使用對象字面量創(chuàng)建對象時(shí),如果留空其花括號({}),則可以定義只包含默認(rèn)屬性和方法的對象。如:
var obj = {}
使用這種方式創(chuàng)建的對象時(shí),可以通過點(diǎn)(.),也就是obj.key給對象obj創(chuàng)建對象屬性,并且賦予對象的屬性值。另外也可以通過方括號([]),也就是obj['key']給對象obj創(chuàng)建對象屬性,并且賦予對象的屬性值。如下面的示例:
var girl = {}; girl.name = '欣欣'; girl.age = 18; girl['height'] = 175; girl['weight'] = 45;
此時(shí)在Chrome中打印girl對象時(shí),輸出的結(jié)果如下所示:
console.log(girl); //Object {name: "欣欣", age: 18, height: 175, weight: 45}
使用new創(chuàng)建對象
使用new操作符后跟Object構(gòu)造函數(shù)(有關(guān)于構(gòu)造函數(shù),后面再講)也可以創(chuàng)建對象:
var obj = new Object(); // 和 obj = {}相同
雖然初始狀態(tài)下,obj是一個(gè)空對象,但在JavaScript中可以很方便地動(dòng)態(tài)添加和使用成員,所以我們可以不斷加入成員變量和方法。如:
var girl = new Object(); girl['name'] = '欣欣'; girl['age'] = 18; girl['height'] = 175; girl['weight'] = 45;
使用Object.create()創(chuàng)建對象
對象也可以用Object.create()方法創(chuàng)建。該方法非常有用,因?yàn)樗试S你為創(chuàng)建的對象選擇其原型對象,而不用定義一個(gè)構(gòu)造函數(shù)。
Object.create()方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對象。
Object.create(proto, [ propertiesObject ])
Object.create()方法創(chuàng)建一個(gè)對象,其接受兩個(gè)參數(shù),其中第一個(gè)參數(shù)是這個(gè)對象的原型對象proto;第二個(gè)是一個(gè)可選參數(shù),用以對對象的屬性做進(jìn)一步描述。這個(gè)方法使用很簡單:
var obj1 = Object.create({ x: 1, y: 2 }); //對象obj1繼承了屬性x和y var obj2 = Object.create(null); //對象obj2沒有原型
如果 proto 參數(shù)不是 null 或一個(gè)對象值,則拋出一個(gè) TypeError 異常。
有關(guān)于Object.create()方法更多的示例可以點(diǎn)擊這里進(jìn)行了解。
使用函數(shù)創(chuàng)建對象
在實(shí)際使用當(dāng)中,字面量創(chuàng)建對象雖然很有用,但是它并不能滿足我們的所有需求,我們希望能夠和其他后臺(tái)語言一樣創(chuàng)建一個(gè)類,然后聲明類的實(shí)例就能夠多次使用,而不用每次使用的時(shí)候都要重新創(chuàng)建它。
因?yàn)镴avaScript沒有類,一般都是使用函數(shù)來定義一個(gè)類似其他語言中的類格式,比如:
function Person() { this.name = "mary"; // 為這個(gè)類添加一個(gè)成員變量name,并為這個(gè)成員變量賦默認(rèn)值 this.age = 5; this.sayHello = function () { console.log(this.name + " : " + this.age); }; }
定義好類之后,我們就可以像下面這樣創(chuàng)建和使用對象:
var person1 = new Person(); person1.name = 'Tom'; person1.age = 20; person1.sayHello(); // Tom : 20 var person2 = new Person(); person2.name = 'W3cplus'; person2.age = 5; person2.sayHello(); // W3cplus : 5
Person()函數(shù)不是用來被調(diào)用的,它是用來被new用的。
通過原型創(chuàng)建對象
這種方法比較前幾種方法來說算是最為復(fù)雜,最為高級的方法。這里還涉及到封裝的一些知識(有關(guān)于這些后續(xù)學(xué)習(xí)到了再記錄)。這里簡單看看如何通過原型創(chuàng)建對象。
首先像函數(shù)方法創(chuàng)建對象一樣,先定義一個(gè)函數(shù):
function Person() { this.name = "W3cplus"; this.age = 5; this.walk = function () { console.log("一個(gè)前端網(wǎng)站..."); }; }
然后在外部可以擴(kuò)允成員:
//添加成員方法 Person.prototype.sayHello = function () { console.log("hello"); }; //也可以添加成員屬性, Person.prototype.height = 100;
一方面,原型可以擴(kuò)充原有類的功能(特別是添加有用方法),也可以像下面這樣寫:
function Person() { } Person.prototype.name = "W3cplus"; Person.prototype.age = 5; Person.prototype.walk = function () { console.log("一個(gè)前端網(wǎng)站..."); }; Person.prototype.sayHello = function () { console.log("hello"); }; Person.prototype.height = 100;
屬性訪問
對象屬性訪問一般有兩種方法,第一種是使用點(diǎn)(.)表示法,這也是最常用的一種方法,也是很多面向?qū)ο笳Z言中通用的語法。第二種方法還可以使用中括號([])表示法來訪問對象的屬性。在使用中括號語法時(shí),應(yīng)該將要訪問的屬性以字符串的形式放在中括號中。如下:
person['name']; person.name;
從功能上來說,上面兩種方法訪問對象屬性沒有任何區(qū)別。但中括號語法的主要優(yōu)點(diǎn)有兩個(gè):
可能通過變量訪問屬性,如下:
var propertyName = 'name'; person[propertyName];
另外一個(gè)優(yōu)點(diǎn)是,如果屬性名中包含了會(huì)導(dǎo)致語法錯(cuò)誤的字符或者屬性名使用的是關(guān)鍵字或保留字,可以使用中括號訪問屬性,如下:
person['first name'];
一般情況之下,除非必須使用亦是來訪問對象屬性,否則建議使用點(diǎn)(.)的方法來訪問對象屬性。
總結(jié)
對象是JavaScript的基本數(shù)據(jù)類型,如果要更好的往下學(xué)習(xí)JavaScript相關(guān)的知識,很有必要先把對象整明白。這篇主要介紹了幾種創(chuàng)建對象的方法。較為簡單的是通過字面量({})和new Object()方法創(chuàng)建,但這兩種方法創(chuàng)建的對象復(fù)用性較差;使用Object.create()創(chuàng)建對象時(shí)不需要定義一個(gè)構(gòu)造函數(shù)就允許你在對象中選擇其原型對象。除了這幾種方法還可以使用函數(shù)和原型創(chuàng)建對象,而這兩種方法相對來說可復(fù)用性強(qiáng),只是使用較為復(fù)雜。
有關(guān)JavaScript學(xué)習(xí)筆記之創(chuàng)建對象的知識小編就給大家介紹到這里,希望對大家有所幫助!
- js創(chuàng)建對象幾種方式的優(yōu)缺點(diǎn)對比
- js創(chuàng)建對象的方法匯總
- 學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JavaScript中用字面量創(chuàng)建對象介紹
- JavaScript中使用Object.create()創(chuàng)建對象介紹
- js中創(chuàng)建對象的幾種方式示例介紹
- javascript中創(chuàng)建對象的幾種方法總結(jié)
- JavaScript創(chuàng)建對象的寫法
- 從面試題學(xué)習(xí)Javascript 面向?qū)ο螅▌?chuàng)建對象)
- js中創(chuàng)建對象的幾種方式
相關(guān)文章
說明你的Javascript技術(shù)很爛的五個(gè)原因
Javascript在互聯(lián)網(wǎng)上名聲很臭,但你又很難再找到一個(gè)像它這樣如此動(dòng)態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言。2011-04-04js實(shí)現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例
本篇文章主要介紹了js實(shí)現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
這篇文章主要介紹了JavaScript DOM元素常見操作,包括針對dom元素的添加、刪除、修改等相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-05-05js實(shí)現(xiàn)div色塊拖動(dòng)錄制
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)div色塊拖動(dòng)錄制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01用javascript實(shí)現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載
用javascript實(shí)現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載...2007-08-08利用JavaScript實(shí)現(xiàn)放鞭炮動(dòng)畫效果
談及過年,最先讓人想到的就是,噼里啪啦的鞭炮聲。本文將利用JavaScript實(shí)現(xiàn)一個(gè)簡單的放鞭炮動(dòng)畫效果,感興趣的小伙伴可以了解一下2023-01-01