JavaScript 對象初探

來源:互聯網
上載者:User

因為一條小龍之前都是學 C#、Java 等,規範嚴謹的語言起身的,所以說起使用 JavaScript 這種鬆散定義的弱型別語言,就有點痛苦,因為它的變數定義實在太彈性了,還不用事先宣告,常常程式碼看到一半,你會搞不清楚,這個變數的型態到底是什麼、使用範圍、他現在的值是多少,這些都會加重後續維護上的成本。

下面會針對JS 關於對象的使用部分做一個初步的探討,讀者看完應該就能對 JS 的對象有個初步的概念,關於 JS 的對象現在大家使用最廣的應該就算是 JSON 了,但是初學者可能用半天還沒發現 JSON 是一個對象,還誤以為是一個陣列,但是說到 JS 的陣列,其實他也是一個對象,所以能像對象一般來操作,只是他擁有陣列特性。

JS 對象,大概是 JS 所有變數裡面為一需要先宣告才能使用的一種了,目前一條小龍所知對象的宣告方式 有下面兩種,而陣列也能用對象的方式來操作,所以在這也算一種

   var arr = [];   var arr = new Array();   var obj = {};   var obj = new Object;

而對象的使用方式,更是千變萬化,而令人頭痛 @@,頭痛的原因是,你要看別人的 code 就會非常痛苦,尤其是有些人喜歡用高深莫測的文法來寫的 code,這些人大概認為寫到別人看不懂,那他就是比較厲害的那個吧....

但這些都會加深維護成本,如果讀者之前有看一條小龍的文章就知道,一條小龍是非常強調規範性的,盡量要讓後面的開發人員都維持在一個統一各規範中來開發。

下面就來看一下,一些常見的對象操作方式
第一種對象初始化的方式是一開始就宣告,對象內容,這個常見的就是在使用 JSON 上了吧,其中讀者要注意的是,對象屬性,只能用字串來定義。
JS 對象比較特別的是,他可以像類似陣列的方式操作對象,如 obj["a"],所以很多人就真的把它當作陣列來操作了,尤其是 JSON 的操作上,是最常見的。

    var obj = { "a": 1, "b": 2 };    alert(obj.a + obj.b);    alert(obj["a"] + obj["b"]);    alert(obj[0] + obj[1]);

上述ans 都是 3,但是最後一個是錯的寫法,讀者可以 再想想,如何達到這個目的。

第二種方式,就是JS 中常見的是後宣告,這是方式是 最 powerful,也是最恐怖的方式,因為後續開發人員,在哪突然宣告了一個屬性、函數等,那就像一個不定時炸彈一樣等著爆炸@@

    var obj = new Object;    obj[0] = "1";    obj.t = "2";    obj.o.t = "3";    obj.show = function () {        alert(this.t);        alert(this["t"]);        alert(this[0]);        alert(obj.o.t);    };    obj.show();

讀者看到了嗎?這種看似亂起八糟的寫法,全部 all pass,而且讀者注意看,還能發現 JS 可以允許對象裡面在定義對象,真是太可怕了,在多定義幾層下去,寫的人都會搞不清楚 this 是指哪一個了吧 @@

當然 最可怕的不只這個,一般開發人員使用對象,應該都是先定義對象型別,在去初始化出來使用,定義型別的方式,就是用 JS 最常見的 function,天阿,讀者知道厲害了吧,function 不只是單純定義 函數而已,也可以拿來當作對象型別定義,也可以把自己當成對象傳出去來進行操作...所以一條小龍前面才會說 JS 對象的使用方式,是千變萬化的,實在太自由了。

下面是一個簡單的宣告對象以及對應的使用範例

    var car1 = new Car("black", 2);    alert(car1.color + "," + car1.doors);    function Car(sColor, iDoors) {        this.color = sColor;        this.doors = iDoors;    };

看到了嗎,function 可以直接拿來當對象型別來操作了,而且既使你已經定義對象型別,一但初始化,你也可以在像上述的對象操作方式一樣,動態增加屬性、對象、函數...等,所以說 JS 是非常非常自由的語言。

當然 動態增加的缺點就是,下次 在初始化時,就不會有這些動態增加的屬性、對象、函數...等了,所以為瞭解決這個缺點(這是缺點嗎??) JS 有一個方法叫做 prototype ,可以動態增加定義型別,這也是一個非常強、非常恐怖的功能,開發人員可以想到就給你重新定義一下型別,添加一些新功能,所以在定義型別時,要小心點定義哪些是public 哪些是 private 的,才不會讓後面用的人,莫名其妙掛點都不知道為什麼。

但是有時我們在使用第三方控制項,為了增加既有功能,這時 prototype 就是一個很方便且必要的功能了,真是一把雙面刃...

下面就來看一下 prototype 的基本用

        Car.prototype.showInfo2 = function () {            alert(this.color + "," + this.doors + "," + this.year);        };        var car1 = new Car("black", 2);        car1.year = 1990;        car1.showInfo2();        car1.showInfo();        function Car(sColor, iDoors) {            this.color = sColor;            this.doors = iDoors;            this.showInfo = function () {                alert(year);            }        };

這段 code 中,讀者可注意一下 year 這個變數的使用範圍,僅局限於外部動態產生的函數才能使用,原型別定義的函數是不能使用的。

介紹到這,也差不多把 JS 常見的對象操作都介紹完了,雖然一條小龍文中抱怨很多 JS 的問題,但不可否認目前 JS 是網頁開發中,不可或缺的重要技術,所以各位讀者,還是要用力去學習、瞭解,然後在使用時,不要圖方便,想到就動態加一下的,要盡量把定義、給值等,都集中在一起,利己利人,如此也才能方便後面的維護。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.