從數(shù)組到對象

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

 
數(shù)組大家都很熟悉吧，我們可以理解為一個Key對應一個Value，而這個Key在數(shù)組中，已經(jīng)默認了(如上述代碼，它的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ù)組的符號[] ，而定義對象的符號為{}
 
元素，屬性，方法
學習數(shù)組的時候，我們可以說數(shù)組里包含了元素，當談到對象的時候，我們可以改變下說法

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

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

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

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 這些方式都是有效的，要靈活去運用
 
在屬性是動態(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(); 

 
訪問對象的方法很簡單，有點就行，不過也可以用數(shù)組的方式，看起來比較詭異
如 hero['say']();
不推薦這種寫法，訪問對象的時候盡量用點的方式。
 
修改屬性和方法
因為Javascript是動態(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的復雜問題以后在討論。
 
構(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 

 要注意的時候，不要丟點 new 操作符。。。
全局對象
上幾節(jié)我們說過全局變量的事情，已經(jīng)說過了我們要盡量避免使用全局變量，當我們學過對象的時候，我們在看看全局變量究竟怎么回事，其實全局變量就是全局對象一個屬性了。如果主機的環(huán)境是web瀏覽器，全局變量就是window。
如果我們定義 var a = 1;
我們可以這么理解：
一個全局變量a，
做為window的一個屬性a.我們可以這么調(diào)用window.a或者window['a']
再看看預定義函數(shù)的parseInt('123 m');我們可以寫為window.parseInt('123 m');
 
constructor 屬性
對象建立之后，后臺有創(chuàng)建了個隱藏屬性，constructor.

h2.constructor;//Hero(name)

因為constructor的屬性是對函數(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" 

其實就是隱藏了 new Object() ,更深的層次應用以后幾個教程在說明。
 
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}。。這點要注意
 
傳遞對象
如果傳遞一個對象到函數(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

最新評論