建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
JavaScript對(duì)象與傳統(tǒng)的面向?qū)ο笾械膶?duì)象幾乎沒(méi)有相似之處，傳統(tǒng)的面向?qū)ο笳Z(yǔ)言中，創(chuàng)建一個(gè)對(duì)象必須先有對(duì)象的模板：類(lèi)，類(lèi)中定義了對(duì)象的屬性和操作這些屬性的方法。通過(guò)實(shí)例化來(lái)構(gòu)筑一個(gè)對(duì)象，然后使用對(duì)象間的協(xié)作來(lái)完成一項(xiàng)功能，通過(guò)功能的集合來(lái)完成整個(gè)工程。而Javascript中是沒(méi)有類(lèi)的概念的，借助JavaScript的動(dòng)態(tài)性，我們完全可以創(chuàng)建一個(gè)空的對(duì)象(而不是類(lèi))，通過(guò)像對(duì)象動(dòng)態(tài)的添加屬性來(lái)完善對(duì)象的功能。
專(zhuān)注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)根河免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
JSON是JavaScript中對(duì)象的字面量，是對(duì)象的表示方法，通過(guò)使用JSON，可以減少中間變量，使代碼的結(jié)構(gòu)更加清晰，也更加直觀(guān)。使用JSON，可以動(dòng)態(tài)的構(gòu)建對(duì)象，而不必通過(guò)類(lèi)來(lái)進(jìn)行實(shí)例化，大大的提高了編碼的效率。
Javascript對(duì)象
JavaScript對(duì)象其實(shí)就是屬性的集合，這里的集合與數(shù)學(xué)上的集合是等價(jià)的，即具有確定性，無(wú)序性和互異性，也就是說(shuō)，給定一個(gè)JavaScript對(duì)象，我們可以明確的知道一個(gè)屬性是不是這個(gè)對(duì)象的屬性，對(duì)象中的屬性是無(wú)序的，并且是各不相同的(如果有同名的，則后聲明的覆蓋先聲明的)。
一般來(lái)說(shuō)，我們聲明對(duì)象的時(shí)候?qū)ο笸皇且粋€(gè)空的集合，不包含任何的屬性，通過(guò)不斷的添加屬性，使得該對(duì)象成為一個(gè)有完整功能的對(duì)象，而不用通過(guò)創(chuàng)建一個(gè)類(lèi)，然后實(shí)例化該類(lèi)這種模式，這樣我們的代碼具有更高的靈活性，我們可以任意的增刪對(duì)象的屬性。
如果讀者有python或其他類(lèi)似的動(dòng)態(tài)語(yǔ)言的經(jīng)驗(yàn),就可以更好的理解JavaScript的對(duì)象，JavaScript對(duì)象的本身就是一個(gè)字典(dictionary)，或者Java語(yǔ)言中的Map，或者稱(chēng)為關(guān)聯(lián)數(shù)組，即通過(guò)鍵來(lái)關(guān)聯(lián)一個(gè)對(duì)象，這個(gè)對(duì)象本身又可以是一個(gè)對(duì)象，根據(jù)此定義，我們可以知道JavaScript對(duì)象可以表示任意復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。
對(duì)象的屬性
屬性是由鍵值對(duì)組成的，即屬性的名字和屬性的值。屬性的名字是一個(gè)字符串，而值可以為任意的JavaScript對(duì)象(JavaScript中的一切皆對(duì)象，包括函數(shù))。比如，聲明一個(gè)對(duì)象：
- //聲明一個(gè)對(duì)象
- var jack = new Object();
- jack.name = "jack";
- jack.age = 26;
- jack.birthday = new Date(1984, 4, 5);
- //聲明另一個(gè)對(duì)象
- var address = new Object();
- address.street = "Huang Quan Road";
- address.xno = "135";
- //將addr屬性賦值為對(duì)象address
- jack.addr = address;
這種聲明對(duì)象的方式與傳統(tǒng)的OO語(yǔ)言是截然不同的，它給了我們極大的靈活性來(lái)定制一個(gè)對(duì)象的行為。
對(duì)象屬性的讀取方式是通過(guò)點(diǎn)操作符(.)來(lái)進(jìn)行的，比如上例中jack對(duì)象的addr屬性，可以通過(guò)下列方式取得：
- var ja = jack.addr;
- ja = jack[addr];
后者是為了避免這種情況，設(shè)想對(duì)象有一個(gè)屬性本身包含一個(gè)點(diǎn)(.)，這在JavaScript中是合法的，比如說(shuō)名字為foo.bar，當(dāng)使用jack.foo.bar的時(shí)候，解釋器會(huì)誤以為foo屬性下有一個(gè)bar的字段，因此可以使用jack[foo.bar]來(lái)進(jìn)行訪(fǎng)問(wèn)。通常來(lái)說(shuō)，我們?cè)陂_(kāi)發(fā)通用的工具包時(shí)，應(yīng)該對(duì)用戶(hù)可能的輸入不做任何假設(shè)，通過(guò)[屬性名]這種形式則總是可以保證正確性的。
屬性與變量
在第二章，我們講解了變量的概念，在本章中，讀者可能已經(jīng)注意到，這二者的行為非常相似，事實(shí)上，對(duì)象的屬性和我們之前所說(shuō)的變量其實(shí)是一回事。
JavaScript引擎在初始化時(shí)，會(huì)構(gòu)建一個(gè)全局對(duì)象，在客戶(hù)端環(huán)境中，這個(gè)全局對(duì)象即為window。如果在其他的JavaScript環(huán)境中需要引用這個(gè)全局對(duì)象，只需要在頂級(jí)作用域(即所有函數(shù)聲明之外的作用域)中聲明：
- var global = this;
我們?cè)陧敿?jí)作用域中聲明的變量將作為全局對(duì)象的屬性被保存，從這一點(diǎn)上來(lái)看，變量其實(shí)就是屬性。比如，在客戶(hù)端，經(jīng)常會(huì)出現(xiàn)這樣的代碼：
- var v = "global";
- var array = ["hello", "world"];
- function func(id){
- var element = document.getElementById(id);
- //對(duì)elemen做一些操作
- }
事實(shí)上相當(dāng)于：
- window.v = "global";
- window.array = ["hello", "world"];
- window.func = function(id){
- var element = document.getElementById(id);
- //對(duì)elemen做一些操作
- }
#p#
原型對(duì)象
原型(prototype)，是JavaScript特有的一個(gè)概念，通過(guò)使用原型，JavaScript可以建立其傳統(tǒng)OO語(yǔ)言中的繼承，從而體現(xiàn)對(duì)象的層次關(guān)系。JavaScript本身是基于原型的，每個(gè)對(duì)象都有一個(gè)prototype的屬性來(lái)，這個(gè)prototype本身也是一個(gè)對(duì)象，因此它本身也可以有自己的原型，這樣就構(gòu)成了一個(gè)鏈結(jié)構(gòu)。
訪(fǎng)問(wèn)一個(gè)屬性的時(shí)候，解析器需要從下向上的遍歷這個(gè)鏈結(jié)構(gòu)，直到遇到該屬性，則返回屬性對(duì)應(yīng)的值，或者遇到原型為null的對(duì)象(JavaScript的基對(duì)象Object的prototype屬性即為null)，如果此對(duì)象仍沒(méi)有該屬性，則返回undefined.
下面我們看一個(gè)具體的例子：
- //聲明一個(gè)對(duì)象base
- function Base(name){
- this.name = name;
- this.getName = function(){
- return this.name;
- }
- }
- //聲明一個(gè)對(duì)象child
- function Child(id){
- this.id = id;
- this.getId = function(){
- return this.id;
- }
- }
- //將child的原型指向一個(gè)新的base對(duì)象
- Child.prototype = new Base("base");
- //實(shí)例化一個(gè)child對(duì)象
- var c1 = new Child("child");
- //c1本身具有g(shù)etId方法
- print(c1.getId());
- //由于c1從原型鏈上"繼承"到了getName方法，因此可以訪(fǎng)問(wèn)
- print(c1.getName());
得出結(jié)果：
child
base
由于遍歷原型鏈的時(shí)候，是有下而上的，所以最先遇到的屬性值最先返回，通過(guò)這種機(jī)制可以完成重載的機(jī)制。
this指針
JavaScript中最容易使人迷惑的恐怕就數(shù)this指針了，this指針在傳統(tǒng)OO語(yǔ)言中，是在類(lèi)中聲明的，表示對(duì)象本身，而在JavaScript中，this表示當(dāng)前上下文，即調(diào)用者的引用。這里我們可以來(lái)看一個(gè)常見(jiàn)的例子：
- //定義一個(gè)人，名字為jack
- var jack = {
- name : "jack",
- age : 26
- }
- //定義另一個(gè)人，名字為abruzzi
- var abruzzi = {
- name : "abruzzi",
- age : 26
- }
- //定義一個(gè)全局的函數(shù)對(duì)象
- function printName(){
- return this.name;
- }
- //設(shè)置printName的上下文為jack, 此時(shí)的this為jack
- print(printName.call(jack));
- //設(shè)置printName的上下文為abruzzi,此時(shí)的this為abruzzi
- print(printName.call(abruzzi));
運(yùn)行結(jié)果：
jack
Abruzzi
應(yīng)該注意的是，this的值并非函數(shù)如何被聲明而確定，而是被函數(shù)如何被調(diào)用而確定，這一點(diǎn)與傳統(tǒng)的面向?qū)ο笳Z(yǔ)言截然不同，call是Function上的一個(gè)函數(shù)，詳細(xì)描述在第四章。
使用對(duì)象
對(duì)象是JavaScript的基礎(chǔ)，我們使用JavaScript來(lái)完成編程工作就是通過(guò)使用對(duì)象來(lái)體現(xiàn)的，這一小節(jié)通過(guò)一些例子來(lái)學(xué)習(xí)如何使用JavaScript對(duì)象：
對(duì)象的聲明有三種方式：
◆ 通過(guò)new操作符作用域Object對(duì)象，構(gòu)造一個(gè)新的對(duì)象，然后動(dòng)態(tài)的添加屬性，從無(wú)到有的構(gòu)筑一個(gè)對(duì)象。
◆ 定義對(duì)象的“類(lèi)”:原型，然后使用new操作符來(lái)批量的構(gòu)筑新的對(duì)象。
◆ 使用JSON，這個(gè)在下一節(jié)來(lái)進(jìn)行詳細(xì)說(shuō)明
這一節(jié)我們?cè)敿?xì)說(shuō)明第二種方式，如：
- //定義一個(gè)"類(lèi)"，Address
- function Address(street, xno){
- this.street = street || 'Huang Quan Road';
- this.xno = xno || 135;
- this.toString = function(){
- return "street : " + this.street + ", No : " + this.xno;
- }
- }
- //定義另一個(gè)"類(lèi)"，Person
- function Person (name, age, addr) {
- this.name = name || 'unknown';
- this.age = age;
- this.addr = addr || new Address(null, null);
- this.getName = function () {return this.name;}
- this.getAge = function(){return this.age;}
- this.getAddr = function(){return this.addr.toString();}
- }
- //通過(guò)new操作符來(lái)創(chuàng)建兩個(gè)對(duì)象，注意，這兩個(gè)對(duì)象是相互獨(dú)立的實(shí)體
- var jack = new Person('jack', 26, new Address('Qing Hai Road', 123));
- var abruzzi = new Person('abruzzi', 26);
- //查看結(jié)果
- print(jack.getName());
- print(jack.getAge());
- print(jack.getAddr());
- print(abruzzi.getName());
- print(abruzzi.getAge());
- print(abruzzi.getAddr());
運(yùn)行結(jié)果如下：
jack
26
street : Qing Hai Road, No : 123
abruzzi
26
street : Huang Quan Road, No : 135
#p#
JSON及其使用
JSON全稱(chēng)為JavaScript對(duì)象表示法(JavaScript Object Notation)，即通過(guò)字面量來(lái)表示一個(gè)對(duì)象，從簡(jiǎn)單到復(fù)雜均可使用此方式。比如：
- var obj = {
- name : "abruzzi",
- age : 26,
- birthday : new Date(1984, 4, 5),
- addr : {
- street : "Huang Quan Road",
- xno : "135"
- }
- }
這種方式，顯然比上邊的例子簡(jiǎn)潔多了，沒(méi)有冗余的中間變量，很清晰的表達(dá)了obj這樣一個(gè)對(duì)象的結(jié)構(gòu)。事實(shí)上，大多數(shù)有經(jīng)驗(yàn)的JavaScript程序員更傾向與使用這種表示法，包括很多JavaScript的工具包如jQuery，ExtJS等都大量的使用了JSON。JSON事實(shí)上已經(jīng)作為一種前端與服務(wù)器端的數(shù)據(jù)交換格式，前端程序通過(guò)Ajax發(fā)送JSON對(duì)象到后端，服務(wù)器端腳本對(duì)JSON進(jìn)行解析，還原成服務(wù)器端對(duì)象，然后做一些處理，反饋給前端的仍然是JSON對(duì)象，使用同一的數(shù)據(jù)格式，可以降低出錯(cuò)的概率。
而且，JSON格式的數(shù)據(jù)本身是可以遞歸的，也就是說(shuō)，可以表達(dá)任意復(fù)雜的數(shù)據(jù)形式。JSON的寫(xiě)法很簡(jiǎn)單，即用花括號(hào)括起來(lái)的鍵值對(duì)，鍵值對(duì)通過(guò)冒號(hào)隔開(kāi)，而值可以是任意的JavaScript對(duì)象，如簡(jiǎn)單對(duì)象String，Boolean，Number，Null，或者復(fù)雜對(duì)象如Date，Object，其他自定義的對(duì)象等。
JSON的另一個(gè)應(yīng)用場(chǎng)景是：當(dāng)一個(gè)函數(shù)擁有多個(gè)返回值時(shí)，在傳統(tǒng)的面向?qū)ο笳Z(yǔ)言中，我們需要組織一個(gè)對(duì)象，然后返回，而JavaScript則完全不需要這么麻煩，比如：
- function point(left, top){
- this.left = left;
- this.top = top;
- //handle the left and top
- return {x: this.left, y:this.top};
- }
直接動(dòng)態(tài)的構(gòu)建一個(gè)新的匿名對(duì)象返回即可：
- var pos = point(3, 4);
- //pos.x = 3;
- //pos.y = 4;
使用JSON返回對(duì)象，這個(gè)對(duì)象可以有任意復(fù)雜的結(jié)構(gòu)，甚至可以包括函數(shù)對(duì)象。
在實(shí)際的編程中，我們通常需要遍歷一個(gè)JavaScript對(duì)象，事先我們對(duì)對(duì)象的內(nèi)容一無(wú)所知。怎么做呢?JavaScript提供了for..in形式的語(yǔ)法糖：
- for(var item in json){
- //item為鍵
- //json[item]為值
- }
這種模式十分有用，比如，在實(shí)際的WEB應(yīng)用中，對(duì)一個(gè)頁(yè)面元素需要設(shè)置一些屬性，這些屬性是事先不知道的，比如：
- var style = {
- border:"1px solid #ccc",
- color:"blue"
- };
然后，我們給一個(gè)DOM元素動(dòng)態(tài)的添加這些屬性：
- for(var item in style){
- //使用jQuery的選擇器
- $("div#element").css(item, style[item]);
- }
當(dāng)然，jQuery有更好的辦法來(lái)做這樣一件事，這里只是舉例子，應(yīng)該注意的是，我們?cè)诮o$("div#element")添加屬性的時(shí)候，我們對(duì)style的結(jié)構(gòu)是不清楚的。
另外比如我們需要收集一些用戶(hù)的自定義設(shè)置，也可以通過(guò)公開(kāi)一個(gè)JSON對(duì)象，用戶(hù)將需要設(shè)置的內(nèi)容填入這個(gè)JSON，然后我們的程序?qū)ζ溥M(jìn)行處理。
- function customize(options){
- this.settings = $.extend(default, options);
- }
原文：http://abruzzi.iteye.com/blog/641532
【系列文章】
JavaScript內(nèi)核之基本概念
JavaScript概述
新聞標(biāo)題：JavaScript入門(mén)之對(duì)象與JSON
網(wǎng)站路徑：http://www.5511xx.com/article/djiepsd.html
