JS技巧:JavaScript中的對象、函數(shù)和繼承
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
1、 Javascript中的對象 JavaScript可以說是一個基于對象的編程語言,為什么說是基于對象而不是面向?qū)ο?,因為JavaScript自身只實現(xiàn)了封裝,而沒有實現(xiàn)繼承和多態(tài)。既然他是基于對象的,那么我們就來說說js中的對象。有人說js中所有的都是對象,這句話不完全正確。正確的一方是他強調(diào)了對象在js中的重要性,對象在js中無處不在,包括可以構(gòu)造對象的函數(shù)本身也是對象。但是另一方面,js中也有一些簡單的數(shù)據(jù)類型,包括數(shù)字、字符串和布爾值、null值和undefined值,而這些不是對象。那為什么這些類型的值不是對象呢,畢竟他們也有方法。那讓我們來看一下,JavaScript中對于對象的定義,有兩種定義。 (1)JavaScript中的對象是可變的鍵控集合(keyed collections) (此定義來自老道的那本書的第三章) (2)JavaScript中的對象是無序(unordered)的屬性集合,這些屬性可以含有簡單的數(shù)據(jù)類型、對象、函數(shù);保存在一個對象屬性中的函數(shù)也被稱為這個對象的方法。 (來自ECMA-262 的4.3.3)(注:這里所說的屬性是可以在js腳本中創(chuàng)建和訪問的(我們稱之為顯性屬性),不包括系統(tǒng)為對象自動分配的內(nèi)部屬性) 那為什么那個簡單的數(shù)據(jù)類型不是對象呢,主要是因為這些數(shù)據(jù)類型的值中擁有的方法是不可變的,而一個對象的屬性是應(yīng)當(dāng)可以被改變的。 2、 對象中的原型鏈[[proto]] JavaScript中的每個對象創(chuàng)建的時候系統(tǒng)都會自動為其分配一個原型屬性[[proto]],用來連接到他的原型對象。在JavaScript中就是通過每個對象中的[[proto]]來實現(xiàn)對象的繼承關(guān)系的。但是對象的[[proto]]屬性在JavaScript是不能訪問和修改的,他是作為一個內(nèi)部的屬性存在的,而且是在對象被創(chuàng)建的同時由系統(tǒng)自動設(shè)定的。 當(dāng)訪問一個對象的某一屬性,如果這個屬性在此對象中不存在,就在他的[[proto]]所指的原型對象的屬性中尋找,如果找到則返回,否則繼續(xù)沿著[[proto]]鏈一直找下去,直到[[proto]]的連接為null的時候停止。 3、 函數(shù)也是對象 JavaScript中的函數(shù)本身就是一個對象(所以我們經(jīng)常稱之為函數(shù)對象),而且可以說他是js中最重要的對象。之所以稱之為最重要的對象,一方面他可以扮演像其他語言中的函數(shù)同樣的角色,可以被調(diào)用,可以被傳入?yún)?shù);另一方面他還被作為對象的構(gòu)造器(constructor)來使用,可以結(jié)合new操作符來創(chuàng)建對象。 既然函數(shù)就是對象,所以必然含有對象擁有的全部性質(zhì),包括對象在創(chuàng)建時設(shè)定的原型鏈[[proto]]屬性。 讓我們來看看函數(shù)對象和普通對象有什么區(qū)別。我們前面說過,對象就是無序的屬性集合,那么函數(shù)的屬性和普通對象的屬性有什么不同呢。根據(jù)ECMA-262中的13.2節(jié)所述,在函數(shù)對象創(chuàng)建時,系統(tǒng)會默認為其創(chuàng)建兩個屬性[[call]]和[[constructor]],當(dāng)函數(shù)對象被當(dāng)做一個普通函數(shù)調(diào)用的時候(例如myFunc()),“()”操作符指明函數(shù)對象的[[call]]屬性就被執(zhí)行,當(dāng)他被當(dāng)做一個構(gòu)造器被調(diào)用的時候(例如new myConst()),他的[[constructor]]屬性就被執(zhí)行,[[cosntructor]]的執(zhí)行過程我們將在下一節(jié)中介紹。除此之外,當(dāng)一個函數(shù)被創(chuàng)建時,系統(tǒng)會默認的再為其創(chuàng)建一個顯示屬性prototype,并為其賦值為 this.prototype = {constructor:this} 具體內(nèi)容可以參加老道的那本書的第五章。這個函數(shù)對象的prototype屬性也是為了js把函數(shù)當(dāng)做構(gòu)造器來實現(xiàn)繼承是準備的,但是這個屬性是可以在js腳本中訪問和修改的。在這里要強調(diào)的一點是,大家一定要區(qū)分對象中的[[proto]]屬性和函數(shù)對象中的prototype屬性,我在剛開始學(xué)習(xí)的時候就是因為沒有很好的區(qū)分這兩個東西,走了很多的彎路。 4、 對象的創(chuàng)建 在js中有兩種創(chuàng)建對象的方法,一種是通過字面量來實現(xiàn),如 var Person = { “first_name”:’liang’, ‘last_name’:’yang’ } 另一種方法是通過構(gòu)造器來創(chuàng)建 var my = new Person(‘liang’,’yang’); 其實第一種方式的創(chuàng)建過程相當(dāng)于調(diào)用Object構(gòu)造器來實現(xiàn),如下。 var Person = new Object(); Person.first_name = ‘liang’; Person.last_name = ‘yang’ 所以我們可以把js中所有對象的創(chuàng)建都合并到使用構(gòu)造器來實現(xiàn),下面我么來詳細說明構(gòu)造器創(chuàng)建對象的過程: 第一步,先創(chuàng)建一個空的對象(既沒有任何屬性),并將這個對象的[[proto]]指向這個構(gòu)造器函數(shù)的prototype屬性對象 第二步,將這個空的對象作為this指針傳給構(gòu)造器函數(shù)并執(zhí)行 第三步,如果上面的函數(shù)返回一個對象,則返回這個對象,否則返回第一步創(chuàng)建的對象 第四步,把函數(shù)當(dāng)做一個類來使用 由上面的步驟我們可以看出,一般來說函數(shù)對象的prototype指向的是一個普通對象,而不是一個函數(shù)對象,這個普通對象中的屬在由此函數(shù)構(gòu)造器創(chuàng)建的對象中也可以訪問。由此可以如此設(shè)計我們的代碼,假設(shè)一個函數(shù)就可以代表一個類,這個構(gòu)造器函數(shù)生成的對象就是這個類的實例對象,那么實例對象中應(yīng)有的屬性和方法應(yīng)該放在這個構(gòu)造器函數(shù)的prototype中,這個類的靜態(tài)方法就可以直接放到這個函數(shù)作為對象的屬性中,最后這個函數(shù)體就是我們平時在面向?qū)ο笳Z言中所說的構(gòu)造函數(shù)(在這里我們要區(qū)分連個詞“構(gòu)造函數(shù)”和“構(gòu)造器函數(shù)”,所謂構(gòu)造函數(shù)是指普通的面向?qū)ο笳Z言中的類的構(gòu)造函數(shù),而構(gòu)造器函數(shù)是指javascript中的一個函數(shù)被當(dāng)做構(gòu)造器使用)。 在第3節(jié)我們說過每個函數(shù)的prototype對象中總是含有一個constructor屬性,這個屬性就是連接到我們的這個函數(shù)本身。再加之,有這個函數(shù)生成的每個對象的[[proto]]屬性都是指向構(gòu)造器函數(shù)的prototype對象,所以通過[[proto]]鏈,每個由構(gòu)造器函數(shù)生成的對象,都有一個constructor屬性,指向生成他的構(gòu)造器函數(shù),因此我們可以通過這個屬性來判斷這個對象是有哪個構(gòu)造器函數(shù)生成的。 5、 函數(shù)繼承(類繼承) 說了這么多,終于到了我們可以在javascript中討論繼承的時候了,我們先來考慮一下要實現(xiàn)類的繼承我們都要做些什么,假設(shè)我們要從superClass繼承到子類subClass 為了使得由subClass生成的對象中能夠訪問superClass生成的對象中的屬性,那么可以使subClass.prototype為一個superClass構(gòu)造函數(shù)生成的對象。 subclass.prototye = new superClass(); 但是問題來了,根據(jù)我們在第4節(jié)說的new superClass()不僅復(fù)制了superClass.prototype中的所有方法,而且還運行了superClass()這個函數(shù),這個函數(shù)起到的作用是類中的構(gòu)造函數(shù)。我們知道應(yīng)該在子類的構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)來實現(xiàn)初始化。為此我們可以創(chuàng)建一個構(gòu)造函數(shù)為空的,但是原型和superClass原型一致的函數(shù),并使subClass.prototype指向這個函數(shù)生成的對象。 var F = function() {}; F.prototype = superClass.prototype; subClass.protptype = new F(); 這樣我們就可以再不調(diào)用構(gòu)造函數(shù)的同時完成屬性復(fù)制的工作。但是還有一個問題,那就是我們修改了subClass的prototype屬性,從而也就刪除了其中的constructor屬性,這樣我們就無法知道他是哪個構(gòu)造器函數(shù)生成的對象了。我們可以再次給他賦值 subClass.prototype.constructor = subClass; 這樣復(fù)制屬性的問題就迎刃而解了。但是新的問題又出現(xiàn)了,在subClass中我們無法知道他的父類是哪個構(gòu)造器函數(shù),所以就無法在構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù),為此我們可以為subClass添加一個屬性,指明他的父類 subClass.superClass = superClass.prototype; 這樣我么就可以在子類的構(gòu)造函數(shù)中使用subClass.superClass.constructor來訪問父類的構(gòu)造函數(shù)了。最后我們把以上的思路寫成一個函數(shù) myPro.extend = function (subClass,superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.protptype = new F(); subClass.prototype.constructor = subClass; subClass.superClass = superClass.prototype; superClass.prototype.constructor = superClass; }
該文章在 2010/8/17 23:32:03 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |