舉例講解JavaScript中關(guān)于對象操作的相關(guān)知識
從數(shù)組到對象
var myarr = ['red','blue','yellow','purple']; myarr;// ["red","blue","yellow","purple"] myarr[0];//"red" myarr[3];//"purple'
數(shù)組大家都很熟悉吧,我們可以理解為一個Key對應(yīng)一個Value,而這個Key在數(shù)組中,已經(jīng)默認(rèn)了(如上述代碼,它的key分別是0,1,2,3 value是red,blue,yellow,purple)。
那么一個對象就可以理解為一個自定義Key的數(shù)組??慈缦麓a
var hero ={
breed: 'Turtle',
occupation:'Ninja'
};
上述代碼我們可以了解到:
1.對象的名稱叫hero.
2.和數(shù)組不同的是用符號'{'替代了'['
3.對象的屬性(如breed和occupation)用符號','分隔
4.Key和Value的語法是 KEY:VALUE
還有需要注意到是不管屬性(也就是key)是放在雙引號,單引號,或者是沒有引號,他們的結(jié)果都是一樣的,下面的代碼是一樣的
var obj={a:1,b:2};
var obj={'a':1,'b':2};
var obj={"a":1,"b":2};
推薦的寫法是不要把屬性放在引號中。除非屬性的名稱是特殊符號,如數(shù)字,或者帶有空格等等。
本篇很簡單,要注意的是,定義數(shù)組的符號[] ,而定義對象的符號為{}
元素,屬性,方法
學(xué)習(xí)數(shù)組的時候,我們可以說數(shù)組里包含了元素,當(dāng)談到對象的時候,我們可以改變下說法
var animal={
name: 'dog',
run:function(){
alert("running");
}
}
name就是屬性(property),run本身是個函數(shù),在這個對象中,我們叫方法(method)。
訪問對象的屬性
有兩種方式訪問對象的屬性。
用數(shù)組的形式如:animal['name']
用點(diǎn)的方式訪問:animal.name
第一種訪問方法適合任意情況。但是如果屬性是無效的命名的話,如上一節(jié)所說的屬性命名'1name'或者'my name'這種情況用點(diǎn)的方式訪問就是錯誤的。這一點(diǎn)要注意。
下面具體看一個對象訪問的例子
var book = {
name:'Javascript Fundation',
published:jixie.
author:{
firstname:'nicholas',
lastname:'xia'
}
};
1.獲取author對象的firstname屬性
book.author.firstname //nicholas
2.獲取author對象的lastname屬性,我們嘗試用另一個寫法
book['author']['lastname'] //xia
我們也可以用混合的訪問方式
book.author['lastname']或者book['author'].lastname 這些方式都是有效的,要靈活去運(yùn)用
在屬性是動態(tài)的情況下,一般用數(shù)組的訪問對象的方法。
var key ='lastname' book.author[key];//xia
調(diào)用對象的方法
var hero = {
breed: 'Turtle',
occupation: 'Ninja',
say: function() {
return 'I am ' + hero.occupation;
}
}
hero.say();
訪問對象的方法很簡單,有點(diǎn)就行,不過也可以用數(shù)組的方式,看起來比較詭異
如 hero['say']();
不推薦這種寫法,訪問對象的時候盡量用點(diǎn)的方式。
修改屬性和方法
因?yàn)镴avascript是動態(tài)語言,所以在任何時候都可以修改對象的屬性和方法??慈缦碌睦?/p>
var hero={};
hero是個空的對象。
typeof hero.breed;//undefined
說明了hero對象沒有breed的屬性
接下來可以添加屬性和方法了
hero.breed = 'turtle';
hero.name = 'Leonardo';
hero.sayName = function() {return hero.name;};
調(diào)用方法
hero.sayName();//Leonardo
刪除屬性
delete hero.name;//true hero.sayName();//方法失敗
This
var hero = {
name : 'Rafaelo',
sayName : function(){
return this.name;
}
}
hero.sayName();//Rafaelo
this的意思就是這個對象的意思,關(guān)于this的復(fù)雜問題以后在討論。
構(gòu)造函數(shù)(Constructor Functions)
另一種創(chuàng)建對象的方式是用構(gòu)造函數(shù),直接看例子
function Hero(){
this.name ='Refaelo';
}
var hero = new Hero();
hero.name;//Refaelo
這種方式的好處在于創(chuàng)建個對象的時候可以傳入?yún)?shù)
function Hero(name){
this.name = name;
this.whoAreYou = function(){
return this.name;
}
}
var hi = new Hero('nicholas');
hi.whoAreYou();//nicholas
要注意的時候,不要丟點(diǎn) new 操作符。。。
全局對象
上幾節(jié)我們說過全局變量的事情,已經(jīng)說過了我們要盡量避免使用全局變量,當(dāng)我們學(xué)過對象的時候,我們在看看全局變量究竟怎么回事,其實(shí)全局變量就是全局對象一個屬性了。如果主機(jī)的環(huán)境是web瀏覽器,全局變量就是window。
如果我們定義 var a = 1;
我們可以這么理解:
一個全局變量a,
做為window的一個屬性a.我們可以這么調(diào)用window.a或者window['a']
再看看預(yù)定義函數(shù)的parseInt('123 m');我們可以寫為window.parseInt('123 m');
constructor 屬性
對象建立之后,后臺有創(chuàng)建了個隱藏屬性,constructor.
h2.constructor;//Hero(name)
因?yàn)閏onstructor的屬性是對函數(shù)的引用。如果你不關(guān)心h2對象是由什么創(chuàng)建的,而只關(guān)心創(chuàng)建一個新的對象和h2相似就用如下寫法
var h3 = h2.constructor('Nicholas');
h3.name ;//Nicholas
我們來看看如下寫法的意思
var o = {};
o.constructor;//Object()
typeof o.constructor;//"functions"
其實(shí)就是隱藏了 new Object() ,更深的層次應(yīng)用以后幾個教程在說明。
instanceof 操作符
用instanceof來判斷對象是否是指定的構(gòu)造函數(shù)創(chuàng)建的。
function Hero(){
}
var h = new Hero();
var o = {};
h instanceof Hero;//true
h instanceof Object;//false
o instanceof Object;//true
要注意的是instanceof 后面的是個引用 不是個函數(shù) 如錯誤寫法 h instanceof Hero();//錯誤
函數(shù)返回對象
可以用構(gòu)造函數(shù)來創(chuàng)建個對象,也可以通過普通函數(shù)返回對象來創(chuàng)建對象
function factory(name){
return {
name:name
};
}
用這個方法創(chuàng)建對象
var o = factory('one');
o.name
讓我們接下來看看比較少見的構(gòu)造函數(shù)返回對象的例子
function C(){
this.a = 1;
return {b:2};
}
var c2 = new C();
typeof c2.a //undefined
c2.b; // 2
說明了 并不返回this了 而是返回了對象{b:2}。。這點(diǎn)要注意
傳遞對象
如果傳遞一個對象到函數(shù)里,那么傳遞的是個引用。如果改變了這個引用,也就會改變原始的對象。
下面是個對象賦值的例子
var original = {name:'nicholas'};
var copy =original;
copy.name;//'nicholas';
copy.name = 'Jason';
original.name;// 'Jason';
修改了copy的屬性name 也就等于修改了original的屬性name
對象傳參到函數(shù)中,也是同樣的。
function modify(o){
o.name ='Jason'
}
var original={name:'nicholas'};
modify(original);
original.name;//Jason
對象的比較
兩個對象的比較如果是true的話,那么他們就是同一個對象的引用。
var fido ={breed:'dog'};
var benji ={breed:'dog'};
benji===fido; //false;
benji==fido; //false;
以上的代碼都不是同一引用,所以都是false
- JavaScript操作XML/HTML比較常用的對象屬性集錦
- 詳解JavaScript對Date對象的操作問題(生成一個倒數(shù)7天的數(shù)組)
- JavaScript對象屬性檢查、增加、刪除、訪問操作實(shí)例
- JavaScript創(chuàng)建一個object對象并操作對象屬性的用法
- javascript內(nèi)置對象操作詳解
- 淺析javascript操作 cookie對象
- JavaScript基礎(chǔ)語法、dom操作樹及document對象
- js用Date對象的setDate()函數(shù)對日期進(jìn)行加減操作
- Jquery操作js數(shù)組及對象示例代碼
- javascript對象的使用和屬性操作示例詳解
- 解析JavaScript中delete操作符不能刪除的對象
- javascript對象的相關(guān)操作小結(jié)
相關(guān)文章
解析js如何獲取當(dāng)前url中的參數(shù)值并復(fù)制給input
本篇文章是對js獲取當(dāng)前url中的參數(shù)值并復(fù)制給input的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
javascript學(xué)習(xí)筆記(十三) js閉包介紹(轉(zhuǎn))
閉包(closure)是Javascript語言的一個難點(diǎn),也是它的特色,很多高級應(yīng)用都要依靠閉包實(shí)現(xiàn)2012-06-06
JavaScript的document對象和window對象詳解
JavaScript的document對象和window對象詳解,js經(jīng)常用得到的知識,了解下。2010-12-12
學(xué)JavaScript七大注意事項(xiàng)【必看】
下面小編就為大家?guī)硪黄獙W(xué)JavaScript七大注意事項(xiàng)【必看】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05

