從數(shù)組到對(duì)象

var myarr = ['red','blue','yellow','purple']; 
myarr;// ["red","blue","yellow","purple"] 
myarr[0];//"red" 
myarr[3];//"purple' 

 
數(shù)組大家都很熟悉吧，我們可以理解為一個(gè)Key對(duì)應(yīng)一個(gè)Value，而這個(gè)Key在數(shù)組中，已經(jīng)默認(rèn)了(如上述代碼，它的key分別是0,1,2,3 value是red,blue,yellow,purple)。
那么一個(gè)對(duì)象就可以理解為一個(gè)自定義Key的數(shù)組?？慈缦麓a

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

 
 上述代碼我們可以了解到:
 1.對(duì)象的名稱叫hero.
 2.和數(shù)組不同的是用符號(hào)'{'替代了'['
 3.對(duì)象的屬性(如breed和occupation)用符號(hào)','分隔
 4.Key和Value的語(yǔ)法是 KEY:VALUE
還有需要注意到是不管屬性(也就是key)是放在雙引號(hào)，單引號(hào)，或者是沒(méi)有引號(hào)，他們的結(jié)果都是一樣的，下面的代碼是一樣的

var obj={a:1,b:2}; 
var obj={'a':1,'b':2}; 
var obj={"a":1,"b":2}; 

推薦的寫(xiě)法是不要把屬性放在引號(hào)中。除非屬性的名稱是特殊符號(hào)，如數(shù)字，或者帶有空格等等。
 
本篇很簡(jiǎn)單，要注意的是，定義數(shù)組的符號(hào)[] ，而定義對(duì)象的符號(hào)為{}
 
元素，屬性，方法
學(xué)習(xí)數(shù)組的時(shí)候，我們可以說(shuō)數(shù)組里包含了元素，當(dāng)談到對(duì)象的時(shí)候，我們可以改變下說(shuō)法

var animal={ 
   name: 'dog', 
   run:function(){ 
    alert("running"); 
  } 
} 

 name就是屬性(property),run本身是個(gè)函數(shù)，在這個(gè)對(duì)象中，我們叫方法(method)。

訪問(wèn)對(duì)象的屬性
有兩種方式訪問(wèn)對(duì)象的屬性。
用數(shù)組的形式如：animal['name']
用點(diǎn)的方式訪問(wèn)：animal.name
第一種訪問(wèn)方法適合任意情況。但是如果屬性是無(wú)效的命名的話，如上一節(jié)所說(shuō)的屬性命名'1name'或者'my name'這種情況用點(diǎn)的方式訪問(wèn)就是錯(cuò)誤的。這一點(diǎn)要注意。
 
下面具體看一個(gè)對(duì)象訪問(wèn)的例子

var book = { 
  name:'Javascript Fundation', 
  published:jixie. 
  author:{ 
    firstname:'nicholas', 
    lastname:'xia' 
  } 
}; 

 
1.獲取author對(duì)象的firstname屬性

book.author.firstname //nicholas

 
2.獲取author對(duì)象的lastname屬性，我們嘗試用另一個(gè)寫(xiě)法

book['author']['lastname'] //xia

我們也可以用混合的訪問(wèn)方式
book.author['lastname']或者book['author'].lastname 這些方式都是有效的，要靈活去運(yùn)用
 
在屬性是動(dòng)態(tài)的情況下，一般用數(shù)組的訪問(wèn)對(duì)象的方法。

var key ='lastname' 
book.author[key];//xia 

調(diào)用對(duì)象的方法

var hero = { 
breed: 'Turtle', 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
} 
hero.say(); 

 
訪問(wèn)對(duì)象的方法很簡(jiǎn)單，有點(diǎn)就行，不過(guò)也可以用數(shù)組的方式，看起來(lái)比較詭異
如 hero['say']();
不推薦這種寫(xiě)法，訪問(wèn)對(duì)象的時(shí)候盡量用點(diǎn)的方式。
 
修改屬性和方法
因?yàn)镴avascript是動(dòng)態(tài)語(yǔ)言，所以在任何時(shí)候都可以修改對(duì)象的屬性和方法?？慈缦碌睦?/p>

var hero={}; 

 hero是個(gè)空的對(duì)象。

typeof hero.breed;//undefined 

 說(shuō)明了hero對(duì)象沒(méi)有breed的屬性
 接下來(lái)可以添加屬性和方法了

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的意思就是這個(gè)對(duì)象的意思,關(guān)于this的復(fù)雜問(wèn)題以后在討論。
 
構(gòu)造函數(shù)(Constructor Functions)
另一種創(chuàng)建對(duì)象的方式是用構(gòu)造函數(shù)，直接看例子

function Hero(){ 
 this.name ='Refaelo'; 
} 
var hero = new Hero();
hero.name;//Refaelo

這種方式的好處在于創(chuàng)建個(gè)對(duì)象的時(shí)候可以傳入?yún)?shù)

function Hero(name){ 
  this.name = name; 
  this.whoAreYou = function(){ 
    return this.name; 
  } 
} 
 
var hi = new Hero('nicholas'); 
hi.whoAreYou();//nicholas 

 要注意的時(shí)候，不要丟點(diǎn) new 操作符。。。
全局對(duì)象
上幾節(jié)我們說(shuō)過(guò)全局變量的事情，已經(jīng)說(shuō)過(guò)了我們要盡量避免使用全局變量，當(dāng)我們學(xué)過(guò)對(duì)象的時(shí)候，我們?cè)诳纯慈肿兞烤烤乖趺椿厥拢鋵?shí)全局變量就是全局對(duì)象一個(gè)屬性了。如果主機(jī)的環(huán)境是web瀏覽器，全局變量就是window。
如果我們定義 var a = 1;
我們可以這么理解：
一個(gè)全局變量a，
做為window的一個(gè)屬性a.我們可以這么調(diào)用window.a或者window['a']
再看看預(yù)定義函數(shù)的parseInt('123 m');我們可以寫(xiě)為window.parseInt('123 m');
 
constructor 屬性
對(duì)象建立之后，后臺(tái)有創(chuàng)建了個(gè)隱藏屬性，constructor.

h2.constructor;//Hero(name)

因?yàn)閏onstructor的屬性是對(duì)函數(shù)的引用。如果你不關(guān)心h2對(duì)象是由什么創(chuàng)建的，而只關(guān)心創(chuàng)建一個(gè)新的對(duì)象和h2相似就用如下寫(xiě)法

var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas 

我們來(lái)看看如下寫(xiě)法的意思

var o = {}; 
o.constructor;//Object() 
typeof o.constructor;//"functions" 

其實(shí)就是隱藏了 new Object() ,更深的層次應(yīng)用以后幾個(gè)教程在說(shuō)明。
 
instanceof 操作符
用instanceof來(lái)判斷對(duì)象是否是指定的構(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 后面的是個(gè)引用 不是個(gè)函數(shù) 如錯(cuò)誤寫(xiě)法 h instanceof Hero();//錯(cuò)誤

函數(shù)返回對(duì)象
可以用構(gòu)造函數(shù)來(lái)創(chuàng)建個(gè)對(duì)象，也可以通過(guò)普通函數(shù)返回對(duì)象來(lái)創(chuàng)建對(duì)象

function factory(name){ 
  return { 
   name:name 
 }; 
} 

用這個(gè)方法創(chuàng)建對(duì)象

var o = factory('one'); 
o.name

 
讓我們接下來(lái)看看比較少見(jiàn)的構(gòu)造函數(shù)返回對(duì)象的例子

function C(){ 
 this.a = 1; 
 return {b:2}; 
} 
 
var c2 = new C(); 
typeof c2.a //undefined 
c2.b; // 2 

 說(shuō)明了 并不返回this了 而是返回了對(duì)象{b:2}。。這點(diǎn)要注意
 
傳遞對(duì)象
如果傳遞一個(gè)對(duì)象到函數(shù)里，那么傳遞的是個(gè)引用。如果改變了這個(gè)引用，也就會(huì)改變?cè)嫉膶?duì)象。
下面是個(gè)對(duì)象賦值的例子

var original = {name:'nicholas'}; 
var copy =original; 
copy.name;//'nicholas'; 
copy.name = 'Jason'; 
original.name;// 'Jason'; 

 
修改了copy的屬性name 也就等于修改了original的屬性name
對(duì)象傳參到函數(shù)中，也是同樣的。

function modify(o){ 
  o.name ='Jason' 
} 
var original={name:'nicholas'}; 
modify(original); 
original.name;//Jason 

 
對(duì)象的比較
兩個(gè)對(duì)象的比較如果是true的話，那么他們就是同一個(gè)對(duì)象的引用。

var fido ={breed:'dog'}; 
var benji ={breed:'dog'}; 
 
benji===fido; //false; 
benji==fido; //false; 

 
 以上的代碼都不是同一引用，所以都是false

最新評(píng)論