javascript
javascript 真经_悟透JavaScript整理版
數據天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。
你看,數據代碼間的關系與物質能量間的關系有著驚人的相似。數據也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀態。而代碼就象能量,他存在的唯一目的,就是要努力改變數據原來的狀態。在代碼改變數據的同時,也會因為數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,數據可以轉變為代碼,而代碼卻又有可能被轉變為數據,或許還存在一個類似E=MC2形式的數碼轉換方程呢。然而,就是在數據和代碼間這種即矛盾又統一的運轉中,總能體現出計算機世界的規律,這些規律正是我們編寫的程序邏輯。
不過,由于不同程序員有著不同的世界觀,這些數據和代碼看起來也就不盡相同。于是,不同世界觀的程序員們運用各自的方法論,推動著編程世界的進化和發展。
眾所周知,當今最流行的編程思想莫過于面向對象編程的思想。為什么面向對象的思想能迅速風靡編程世界呢?因為面向對象的思想首次把數據和代碼結合成統一體,并以一個簡單的對象概念呈現給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的復雜數據結構,劃分成清晰而有序的對象結構,從而理清了數據與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的編程世界了。
在五祖弘忍講授完《對象真經》之后的一天,他對眾弟子們說:“經已講完,想必爾等應該有所感悟,請各自寫個偈子來看”。大弟子神秀是被大家公認為悟性最高的師兄,他的偈子寫道:“身是對象樹,心如類般明。朝朝勤拂拭,莫讓惹塵埃!”。此偈一出,立即引起師兄弟們的轟動,大家都說寫得太好了。只有火頭僧慧能看后,輕輕地嘆了口氣,又隨手在墻上寫道:“對象本無根,類型亦無形。本來無一物,何處惹塵埃?”。然后搖了搖頭,揚長而去。大家看了慧能的偈子都說:“寫的什么亂七八糟的啊,看不懂”。師父弘忍看了神秀的詩偈也點頭稱贊,再看慧能的詩偈之后默然搖頭。就在當天夜里,弘忍卻悄悄把慧能叫到自己的禪房,將珍藏多年的軟件真經傳授于他,然后讓他趁著月色連夜逃走...
后來,慧能果然不負師父厚望,在南方開創了禪宗另一個廣闊的天空。而慧能當年帶走的軟件真經中就有一本是《JavaScript真經》!
回歸簡單
要理解JavaScript,你得首先放下對象和類的概念,回到數據和代碼的本原。前面說過,編程世界只有數據和代碼兩種基本元素,而這兩種元素又有著糾纏不清的關系。JavaScript就是把數據和代碼都簡化到最原始的程度。
JavaScript中的數據很簡潔的。簡單數據只有?undefined,?null,?boolean,?number和string這五種,而復雜數據只有一種,即object。這就好比中國古典的樸素唯物思想,把世界最基本的元素歸為金木水火土,其他復雜的物質都是由這五種基本元素組成。
JavaScript中的代碼只體現為一種形式,就是function。
注意:以上單詞都是小寫的,不要和Number,?String,?Object,?Function等JavaScript內置函數混淆了。要知道,JavaScript語言是區分大小寫的呀!
任何一個JavaScript的標識、常量、變量和參數都只是unfined,?null,?bool,?number,?string,?object?和?function類型中的一種,也就typeof返回值表明的類型。除此之外沒有其他類型了。
先說說簡單數據類型吧。
undefined:???代表一切未知的事物,啥都沒有,無法想象,代碼也就更無法去處理了。
注意:typeof(undefined)?返回也是?undefined。
可以將undefined賦值給任何變量或屬性,但并不意味了清除了該變量,反而會因此多了一個屬性。
null:????????????有那么一個概念,但沒有東西。無中似有,有中還無。雖難以想象,但已經可以用代碼來處理了。
注意:typeof(null)返回object,但null并非object,具有null值的變量也并非object。
boolean:??????是就是,非就非,沒有疑義。對就對,錯就錯,絕對明確。既能被代碼處理,也可以控制代碼的流程。
number:??????線性的事物,大小和次序分明,多而不亂。便于代碼進行批量處理,也控制代碼的迭代和循環等。
注意:typeof(NaN)和typeof(Infinity)都返回number?。
NaN參與任何數值計算的結構都是NaN,而且?NaN?!=?NaN?。
Infinity?/?Infinity?=?NaN?。
string:?????????面向人類的理性事物,而不是機器信號。人機信息溝通,代碼據此理解人的意圖等等,都靠它了。
簡單類型都不是對象,JavaScript沒有將對象化的能力賦予這些簡單類型。直接被賦予簡單類型常量值的標識符、變量和參數都不是一個對象。
所謂“對象化”,就是可以將數據和代碼組織成復雜結構的能力。JavaScript中只有object類型和function類型提供了對象化的能力。
沒有類
object就是對象的類型。在JavaScript中不管多么復雜的數據和代碼,都可以組織成object形式的對象。
但JavaScript卻沒有?“類”的概念!
對于許多面向對象的程序員來說,這恐怕是JavaScript中最難以理解的地方。是啊,幾乎任何講面向對象的書中,第一個要講的就是“類”的概念,這可是面向對象的支柱。這突然沒有了“類”,我們就象一下子沒了精神支柱,感到六神無主。看來,要放下對象和類,達到“對象本無根,類型亦無形”的境界確實是件不容易的事情啊。
這樣,我們先來看一段JavaScript程序:
對象素描
已經說了許多了許多話題了,但有一個很基本的問題我們忘了討論,那就是:怎樣建立對象?
在前面的示例中,我們已經涉及到了對象的建立了。我們使用了一種被稱為JavaScript?Object?Notation(縮寫JSON)的形式,翻譯為中文就是“JavaScript對象表示法”。
JSON為創建對象提供了非常簡單的方法。例如,
創建一個沒有任何屬性的對象:
var?o?=?{};
創建一個對象并設置屬性及初始值:
var?person?=?{name:?"Angel",?age:?18,?married:?false};
創建一個對象并設置屬性和方法:
var?speaker?=?{text:?"Hello?World",?say:?function(){alert(this.text)}};
創建一個更復雜的對象,嵌套其他對象和對象數組等:
var?company?=
{
name:?"Microsoft",
product:?"softwares",
chairman:?{name:?"Bill?Gates",?age:?53,?Married:?true},
employees:?[{name:?"Angel",?age:?26,?Married:?false},?{name:?"Hanson",?age:?32,?Marred:?true}],
readme:?function()?{document.write(this.name?+?"?product?"?+?this.product);}
};
JSON的形式就是用大括“{}”號包括起來的項目列表,每一個項目間并用逗號“,”分隔,而項目就是用冒號“:”分隔的屬性名和屬性值。這是典型的字典表示形式,也再次表明了?JavaScript里的對象就是字典結構。不管多么復雜的對象,都可以被一句JSON代碼來創建并賦值。
其實,JSON就是JavaScript對象最好的序列化形式,它比XML更簡潔也更省空間。對象可以作為一個JSON形式的字符串,在網絡間自由傳遞和交換信息。而當需要將這個JSON字符串變成一個JavaScript對象時,只需要使用eval函數這個強大的數碼轉換引擎,就立即能得到一個JavaScript內存對象。正是由于JSON的這種簡單樸素的天生麗質,才使得她在AJAX舞臺上成為璀璨奪目的明星。
JavaScript就是這樣,把面向對象那些看似復雜的東西,用及其簡潔的形式表達出來。卸下對象浮華的濃妝,還對象一個眉目清晰!
構造對象
好了,接下我們來討論一下對象的另一種創建方法。
除JSON外,在JavaScript中我們可以使用new操作符結合一個函數的形式來創建對象。例如:
function?MyFunc()?{};?????????//定義一個空函數
var?anObj?=?new?MyFunc();??//使用new操作符,借助MyFun函數,就創建了一個對象
JavaScript的這種創建對象的方式可真有意思,如何去理解這種寫法呢?
其實,可以把上面的代碼改寫成這種等價形式:
function?MyFunc(){};
var?anObj?=?{};?????//創建一個對象
MyFunc.call(anObj);?//將anObj對象作為this指針調用MyFunc函數
我們就可以這樣理解,JavaScript先用new操作符創建了一個對象,緊接著就將這個對象作為this參數調用了后面的函數。其實,JavaScript內部就是這么做的,而且任何函數都可以被這樣調用!但從?“anObj?=?new?MyFunc()”?這種形式,我們又看到一個熟悉的身影,C++和C#不就是這樣創建對象的嗎?原來,條條大路通靈山,殊途同歸啊!
君看到此處也許會想,我們為什么不可以把這個MyFunc當作構造函數呢?恭喜你,答對了!JavaScript也是這么想的!請看下面的代碼:
1?????function?Person(name)???//帶參數的構造函數
2?????{
3?????????this.name?=?name;???//將參數值賦給給this對象的屬性
4?????????this.SayHello?=?function()?{alert("Hello,?I'm?"?+?this.name);};???//給this對象定義一個SayHello方法。
5?????};
6
7?????function?Employee(name,?salary)?????//子構造函數
8?????{
9?????????Person.call(this,?name);????????//將this傳給父構造函數
10?????????this.salary?=?salary;???????//設置一個this的salary屬性
11?????????this.ShowMeTheMoney?=?function()?{alert(this.name?+?"?$"?+?this.salary);};??//添加ShowMeTheMoney方法。
12?????};
13
14?????var?BillGates?=?new?Person("Bill?Gates");???//用Person構造函數創建BillGates對象
15?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//用Empolyee構造函數創建SteveJobs對象
16
17?????BillGates.SayHello();???//顯示:I'm?Bill?Gates
18?????SteveJobs.SayHello();???//顯示:I'm?Steve?Jobs
19?????SteveJobs.ShowMeTheMoney();???//顯示:Steve?Jobs?$1234
20
21?????alert(BillGates.constructor?==?Person);??//顯示:true
22?????alert(SteveJobs.constructor?==?Employee);??//顯示:true
23
24?????alert(BillGates.SayHello?==?SteveJobs.SayHello);?//顯示:false
這段代碼表明,函數不但可以當作構造函數,而且還可以帶參數,還可以為對象添加成員和方法。其中的第9行,Employee構造函數又將自己接收的this作為參數調用Person構造函數,這就是相當于調用基類的構造函數。第21、22行還表明這樣一個意思:BillGates是由Person構造的,而SteveJobs是由Employee構造的。對象內置的constructor屬性還指明了構造對象所用的具體函數!
其實,如果你愿意把函數當作“類”的話,她就是“類”,因為她本來就有“類”的那些特征。難道不是嗎?她生出的兒子各個都有相同的特征,而且構造函數也與類同名嘛!
但要注意的是,用構造函數操作this對象創建出來的每一個對象,不但具有各自的成員數據,而且還具有各自的方法數據。換句話說,方法的代碼體(體現函數邏輯的數據)在每一個對象中都存在一個副本。盡管每一個代碼副本的邏輯是相同的,但對象們確實是各自保存了一份代碼體。上例中的最后一句說明了這一實事,這也解釋了JavaScript中的函數就是對象的概念。
同一類的對象各自有一份方法代碼顯然是一種浪費。在傳統的對象語言中,方法函數并不象JavaScript那樣是個對象概念。即使也有象函數指針、方法指針或委托那樣的變化形式,但其實質也是對同一份代碼的引用。一般的對象語言很難遇到這種情況。
不過,JavaScript語言有大的靈活性。我們可以先定義一份唯一的方法函數體,并在構造this對象時使用這唯一的函數對象作為其方法,就能共享方法邏輯。例如:
1?????function?Person(name)???//基類構造函數
2?????{
3?????????this.name?=?name;
4?????};
5
6?????Person.prototype.SayHello?=?function()??//給基類構造函數的prototype添加方法
7?????{
8?????????alert("Hello,?I'm?"?+?this.name);
9?????};
10
11?????function?Employee(name,?salary)?//子類構造函數
12?????{
13?????????Person.call(this,?name);????//調用基類構造函數
14?????????this.salary?=?salary;
15?????};
16
17?????Employee.prototype?=?new?Person();??//建一個基類的對象作為子類原型的原型,這里很有意思
18
19?????Employee.prototype.ShowMeTheMoney?=?function()??//給子類添構造函數的prototype添加方法
20?????{
21?????????alert(this.name?+?"?$"?+?this.salary);
22?????};
23
24?????var?BillGates?=?new?Person("Bill?Gates");???//創建基類Person的BillGates對象
25?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//創建子類Employee的SteveJobs對象
26
27?????BillGates.SayHello();???????//通過對象直接調用到prototype的方法
28?????SteveJobs.SayHello();???????//通過子類對象直接調用基類prototype的方法,關注!
29?????SteveJobs.ShowMeTheMoney();?//通過子類對象直接調用子類prototype的方法
30
31?????alert(BillGates.SayHello?==?SteveJobs.SayHello);?//顯示:true,表明prototype的方法是共享的????這段代碼的第17行,構造了一個基類的對象,并將其設為子類構造函數的prototype,這是很有意思的。這樣做的目的就是為了第28行,通過子類對象也可以直接調用基類prototype的方法。為什么可以這樣呢?
原來,在JavaScript中,prototype不但能讓對象共享自己財富,而且prototype還有尋根問祖的天性,從而使得先輩們的遺產可以代代相傳。當從一個對象那里讀取屬性或調用方法時,如果該對象自身不存在這樣的屬性或方法,就會去自己關聯的prototype對象那里尋找;如果prototype沒有,又會去prototype自己關聯的前輩prototype那里尋找,直到找到或追溯過程結束為止。
在JavaScript內部,對象的屬性和方法追溯機制是通過所謂的prototype鏈來實現的。當用new操作符構造對象時,也會同時將構造函數的prototype對象指派給新創建的對象,成為該對象內置的原型對象。對象內置的原型對象應該是對外不可見的,盡管有些瀏覽器(如Firefox)可以讓我們訪問這個內置原型對象,但并不建議這樣做。內置的原型對象本身也是對象,也有自己關聯的原型對象,這樣就形成了所謂的原型鏈。
在原型鏈的最末端,就是Object構造函數prototype屬性指向的那一個原型對象。這個原型對象是所有對象的最老祖先,這個老祖宗實現了諸如toString等所有對象天生就該具有的方法。其他內置構造函數,如Function,?Boolean,?String,?Date和RegExp等的prototype都是從這個老祖宗傳承下來的,但他們各自又定義了自身的屬性和方法,從而他們的子孫就表現出各自宗族的那些特征。
這不就是“繼承”嗎?是的,這就是“繼承”,是JavaScript特有的“原型繼承”。
“原型繼承”是慈祥而又嚴厲的。原形對象將自己的屬性和方法無私地貢獻給孩子們使用,也并不強迫孩子們必須遵從,允許一些頑皮孩子按自己的興趣和愛好獨立行事。從這點上看,原型對象是一位慈祥的母親。然而,任何一個孩子雖然可以我行我素,但卻不能動原型對象既有的財產,因為那可能會影響到其他孩子的利益。從這一點上看,原型對象又象一位嚴厲的父親。我們來看看下面的代碼就可以理解這個意思了:
function?Person(name)
{
this.name?=?name;
};
Person.prototype.company?=?"Microsoft";?//原型的屬性
Person.prototype.SayHello?=?function()??//原型的方法
{
alert("Hello,?I'm?"?+?this.name?+?"?of?"?+?this.company);
};
var?BillGates?=?new?Person("Bill?Gates");
BillGates.SayHello();???//由于繼承了原型的東西,規規矩矩輸出:Hello,?I'm?Bill?Gates
var?SteveJobs?=?new?Person("Steve?Jobs");
SteveJobs.company?=?"Apple";????//設置自己的company屬性,掩蓋了原型的company屬性
SteveJobs.SayHello?=?function()?//實現了自己的SayHello方法,掩蓋了原型的SayHello方法
{
alert("Hi,?"?+?this.name?+?"?like?"?+?this.company?+?",?ha?ha?ha?");
};
SteveJobs.SayHello();???//都是自己覆蓋的屬性和方法,輸出:Hi,?Steve?Jobs?like?Apple,?ha?ha?ha
BillGates.SayHello();???//SteveJobs的覆蓋沒有影響原型對象,BillGates還是按老樣子輸出????對象可以掩蓋原型對象的那些屬性和方法,一個構造函數原型對象也可以掩蓋上層構造函數原型對象既有的屬性和方法。這種掩蓋其實只是在對象自己身上創建了新的屬性和方法,只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機制實現了對象的“多態”性,與靜態對象語言的虛函數和重載(override)概念不謀而合。
然而,比靜態對象語言更神奇的是,我們可以隨時給原型對象動態添加新的屬性和方法,從而動態地擴展基類的功能特性。這在靜態對象語言中是很難想象的。我們來看下面的代碼:
function?Person(name)
{
this.name?=?name;
};
Person.prototype.SayHello?=?function()??//建立對象前定義的方法
{
alert("Hello,?I'm?"?+?this.name);
};
var?BillGates?=?new?Person("Bill?Gates");???//建立對象
BillGates.SayHello();
Person.prototype.Retire?=?function()????//建立對象后再動態擴展原型的方法
{
alert("Poor?"?+?this.name?+?",?bye?bye!");
};
BillGates.Retire();?//動態擴展的方法即可被先前建立的對象立即調用????阿彌佗佛,原型繼承竟然可以玩出有這樣的法術!
原型擴展
想必君的悟性極高,可能你會這樣想:如果在JavaScript內置的那些如Object和Function等函數的prototype上添加些新的方法和屬性,是不是就能擴展JavaScript的功能呢?
那么,恭喜你,你得到了!
在AJAX技術迅猛發展的今天,許多成功的AJAX項目的JavaScript運行庫都大量擴展了內置函數的prototype功能。比如微軟的ASP.NET?AJAX,就給這些內置函數及其prototype添加了大量的新特性,從而增強了JavaScript的功能。
我們來看一段摘自MicrosoftAjax.debug.js中的代碼:
String.prototype.trim?=?function?String$trim()?{
if?(arguments.length?!==?0)?throw?Error.parameterCount();
return?this.replace(/^\s+|\s+$/g,?'');
}
這段代碼就是給內置String函數的prototype擴展了一個trim方法,于是所有的String類對象都有了trim方法了。有了這個擴展,今后要去除字符串兩段的空白,就不用再分別處理了,因為任何字符串都有了這個擴展功能,只要調用即可,真的很方便。
當然,幾乎很少有人去給Object的prototype添加方法,因為那會影響到所有的對象,除非在你的架構中這種方法的確是所有對象都需要的。
前兩年,微軟在設計AJAX類庫的初期,用了一種被稱為“閉包”(closure)的技術來模擬“類”。其大致模型如下:
function?Person(firstName,?lastName,?age)
{
//私有變量:
var?_firstName?=?firstName;
var?_lastName?=?lastName;
//公共變量:
this.age?=?age;
//方法:
this.getName?=?function()
{
return(firstName?+?"?"?+?lastName);
};
this.SayHello?=?function()
{
alert("Hello,?I'm?"?+?firstName?+?"?"?+?lastName);
};
};
var?BillGates?=?new?Person("Bill",?"Gates",?53);
var?SteveJobs?=?new?Person("Steve",?"Jobs",?53);
BillGates.SayHello();
SteveJobs.SayHello();
alert(BillGates.getName()?+?"?"?+?BillGates.age);
alert(BillGates.firstName);?????//這里不能訪問到私有變量
很顯然,這種模型的類描述特別象C#語言的描述形式,在一個構造函數里依次定義了私有成員、公共屬性和可用的方法,顯得非常優雅嘛。特別是“閉包”機制可以模擬對私有成員的保護機制,做得非常漂亮。
所謂的“閉包”,就是在構造函數體內定義另外的函數作為目標對象的方法函數,而這個對象的方法函數反過來引用外層外層函數體中的臨時變量。這使得只要目標對象在生存期內始終能保持其方法,就能間接保持原構造函數體當時用到的臨時變量值。盡管最開始的構造函數調用已經結束,臨時變量的名稱也都消失了,但在目標對象的方法內卻始終能引用到該變量的值,而且該值只能通這種方法來訪問。即使再次調用相同的構造函數,但只會生成新對象和方法,新的臨時變量只是對應新的值,和上次那次調用的是各自獨立的。的確很巧妙!
但是前面我們說過,給每一個對象設置一份方法是一種很大的浪費。還有,“閉包”這種間接保持變量值的機制,往往會給JavaSript的垃圾回收器制造難題。特別是遇到對象間復雜的循環引用時,垃圾回收的判斷邏輯非常復雜。無獨有偶,IE瀏覽器早期版本確實存在JavaSript垃圾回收方面的內存泄漏問題。再加上“閉包”模型在性能測試方面的表現不佳,微軟最終放棄了“閉包”模型,而改用“原型”模型。正所謂“有得必有失”嘛。
原型模型需要一個構造函數來定義對象的成員,而方法卻依附在該構造函數的原型上。大致寫法如下:
//定義構造函數
function?Person(name)
{
this.name?=?name;???//在構造函數中定義成員
};
//方法定義到構造函數的prototype上
Person.prototype.SayHello?=?function()
{
alert("Hello,?I'm?"?+?this.name);
};
//子類構造函數
function?Employee(name,?salary)
{
Person.call(this,?name);????//調用上層構造函數
this.salary?=?salary;???????//擴展的成員
};
//子類構造函數首先需要用上層構造函數來建立prototype對象,實現繼承的概念
Employee.prototype?=?new?Person()???//只需要其prototype的方法,此對象的成員沒有任何意義!
//子類方法也定義到構造函數之上
Employee.prototype.ShowMeTheMoney?=?function()
{
alert(this.name?+?"?$"?+?this.salary);
};
var?BillGates?=?new?Person("Bill?Gates");
BillGates.SayHello();
var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();????原型類模型雖然不能模擬真正的私有變量,而且也要分兩部分來定義類,顯得不怎么“優雅”。不過,對象間的方法是共享的,不會遇到垃圾回收問題,而且性能優于“閉包”模型。正所謂“有失必有得”嘛。
在原型模型中,為了實現類繼承,必須首先將子類構造函數的prototype設置為一個父類的對象實例。創建這個父類對象實例的目的就是為了構成原型鏈,以起到共享上層原型方法作用。但創建這個實例對象時,上層構造函數也會給它設置對象成員,這些對象成員對于繼承來說是沒有意義的。雖然,我們也沒有給構造函數傳遞參數,但確實創建了若干沒有用的成員,盡管其值是undefined,這也是一種浪費啊。
唉!世界上沒有完美的事情啊!
原型真諦
正當我們感概萬分時,天空中一道紅光閃過,祥云中出現了觀音菩薩。只見她手持玉凈瓶,輕拂翠柳枝,灑下幾滴甘露,頓時讓JavaScript又添新的靈氣。
觀音灑下的甘露在JavaScript的世界里凝結成塊,成為了一種稱為“語法甘露”的東西。這種語法甘露可以讓我們編寫的代碼看起來更象對象語言。
要想知道這“語法甘露”為何物,就請君側耳細聽。
在理解這些語法甘露之前,我們需要重新再回顧一下JavaScript構造對象的過程。
我們已經知道,用?var?anObject?=?new?aFunction()?形式創建對象的過程實際上可以分為三步:第一步是建立一個新對象;第二步將該對象內置的原型對象設置為構造函數prototype引用的那個原型對象;第三步就是將該對象作為this參數調用構造函數,完成成員設置等初始化工作。對象建立之后,對象上的任何訪問和操作都只與對象自身及其原型鏈上的那串對象有關,與構造函數再扯不上關系了。換句話說,構造函數只是在創建對象時起到介紹原型對象和初始化對象兩個作用。
那么,我們能否自己定義一個對象來當作原型,并在這個原型上描述類,然后將這個原型設置給新創建的對象,將其當作對象的類呢?我們又能否將這個原型中的一個方法當作構造函數,去初始化新建的對象呢?例如,我們定義這樣一個原型對象:
var?Person?=??//定義一個對象來作為原型類
{
Create:?function(name,?age)??//這個當構造函數
{
this.name?=?name;
this.age?=?age;
},
SayHello:?function()??//定義方法
{
alert("Hello,?I'm?"?+?this.name);
},
HowOld:?function()??//定義方法
{
alert(this.name?+?"?is?"?+?this.age?+?"?years?old.");
}
};????這個JSON形式的寫法多么象一個C#的類啊!既有構造函數,又有各種方法。如果可以用某種形式來創建對象,并將對象的內置的原型設置為上面這個“類”對象,不就相當于創建該類的對象了嗎?
但遺憾的是,我們幾乎不能訪問到對象內置的原型屬性!盡管有些瀏覽器可以訪問到對象的內置原型,但這樣做的話就只能限定了用戶必須使用那種瀏覽器。這也幾乎不可行。
那么,我們可不可以通過一個函數對象來做媒介,利用該函數對象的prototype屬性來中轉這個原型,并用new操作符傳遞給新建的對象呢?
其實,象這樣的代碼就可以實現這一目標:
function?anyfunc(){};???????????//定義一個函數軀殼
anyfunc.prototype?=?Person;?????//將原型對象放到中轉站prototype
var?BillGates?=?new?anyfunc();??//新建對象的內置原型將是我們期望的原型對象
不過,這個anyfunc函數只是一個軀殼,在使用過這個軀殼之后它就成了多余的東西了,而且這和直接使用構造函數來創建對象也沒啥不同,有點不爽。
可是,如果我們將這些代碼寫成一個通用函數,而那個函數軀殼也就成了函數內的函數,這個內部函數不就可以在外層函數退出作用域后自動消亡嗎?而且,我們可以將原型對象作為通用函數的參數,讓通用函數返回創建的對象。我們需要的就是下面這個形式:
function?New(aClass,?aParams)????//通用創建函數
{
function?new_()?????//定義臨時的中轉函數殼
{
aClass.Create.apply(this,?aParams);???//調用原型中定義的的構造函數,中轉構造邏輯及構造參數
};
new_.prototype?=?aClass;????//準備中轉原型對象
return?new?new_();??????????//返回建立最終建立的對象
};
var?Person?=????????//定義的類
{
Create:?function(name,?age)
{
this.name?=?name;
this.age?=?age;
},
SayHello:?function()
{
alert("Hello,?I'm?"?+?this.name);
},
HowOld:?function()
{
alert(this.name?+?"?is?"?+?this.age?+?"?years?old.");
}
};
var?BillGates?=?New(Person,?["Bill?Gates",?53]);??//調用通用函數創建對象,并以數組形式傳遞構造參數
BillGates.SayHello();
BillGates.HowOld();
alert(BillGates.constructor?==?Object);?????//輸出:true
這里的通用函數New()就是一個“語法甘露”!這個語法甘露不但中轉了原型對象,還中轉了構造函數邏輯及構造參數。
有趣的是,每次創建完對象退出New函數作用域時,臨時的new_函數對象會被自動釋放。由于new_的prototype屬性被設置為新的原型對象,其原來的原型對象和new_之間就已解開了引用鏈,臨時函數及其原來的原型對象都會被正確回收了。上面代碼的最后一句證明,新創建的對象的constructor屬性返回的是Object函數。其實新建的對象自己及其原型里沒有constructor屬性,那返回的只是最頂層原型對象的構造函數,即Object。
有了New這個語法甘露,類的定義就很像C#那些靜態對象語言的形式了,這樣的代碼顯得多么文靜而優雅啊!
當然,這個代碼僅僅展示了“語法甘露”的概念。我們還需要多一些的語法甘露,才能實現用簡潔而優雅的代碼書寫類層次及其繼承關系。好了,我們再來看一個更豐富的示例吧:
//語法甘露:
var?object?=????//定義小寫的object基本類,用于實現最基礎的方法等
{
isA:?function(aType)???//一個判斷類與類之間以及對象與類之間關系的基礎方法
{
var?self?=?this;
while(self)
{
if?(self?==?aType)
return?true;
self?=?self.Type;
};
return?false;
}
};
function?Class(aBaseClass,?aClassDefine)????//創建類的函數,用于聲明類及繼承關系
{
function?class_()???//創建類的臨時函數殼
{
this.Type?=?aBaseClass;????//我們給每一個類約定一個Type屬性,引用其繼承的類
for(var?member?in?aClassDefine)
this[member]?=?aClassDefine[member];????//復制類的全部定義到當前創建的類
};
class_.prototype?=?aBaseClass;
return?new?class_();
};
function?New(aClass,?aParams)???//創建對象的函數,用于任意類的對象創建
{
function?new_()?????//創建對象的臨時函數殼
{
this.Type?=?aClass;????//我們也給每一個對象約定一個Type屬性,據此可以訪問到對象所屬的類
if?(aClass.Create)
aClass.Create.apply(this,?aParams);???//我們約定所有類的構造函數都叫Create,這和DELPHI比較相似
};
new_.prototype?=?aClass;
return?new?new_();
};
//語法甘露的應用效果:
var?Person?=?Class(object,??????//派生至object基本類
{
Create:?function(name,?age)
{
this.name?=?name;
this.age?=?age;
},
SayHello:?function()
{
alert("Hello,?I'm?"?+?this.name?+?",?"?+?this.age?+?"?years?old.");
}
});
var?Employee?=?Class(Person,????//派生至Person類,是不是和一般對象語言很相似?
{
Create:?function(name,?age,?salary)
{
Person.Create.call(this,?name,?age);??//調用基類的構造函數
this.salary?=?salary;
},
ShowMeTheMoney:?function()
{
alert(this.name?+?"?$"?+?this.salary);
}
});
var?BillGates?=?New(Person,?["Bill?Gates",?53]);
var?SteveJobs?=?New(Employee,?["Steve?Jobs",?53,?1234]);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
var?LittleBill?=?New(BillGates.Type,?["Little?Bill",?6]);???//根據BillGate的類型創建LittleBill
LittleBill.SayHello();
alert(BillGates.isA(Person));???????//true
alert(BillGates.isA(Employee));?????//false
alert(SteveJobs.isA(Person));???????//true
alert(Person.isA(Employee));????????//false
alert(Employee.isA(Person));????????//true
“語法甘露”不用太多,只要那么一點點,就能改觀整個代碼的易讀性和流暢性,從而讓代碼顯得更優雅。有了這些語法甘露,JavaScript就很像一般對象語言了,寫起代碼了感覺也就爽多了!
令人高興的是,受這些甘露滋養的JavaScript程序效率會更高。因為其原型對象里既沒有了毫無用處的那些對象級的成員,而且還不存在constructor屬性體,少了與構造函數間的牽連,但依舊保持了方法的共享性。這讓JavaScript在追溯原型鏈和搜索屬性及方法時,少費許多工夫啊。
我們就把這種形式稱為“甘露模型”吧!其實,這種“甘露模型”的原型用法才是符合prototype概念的本意,才是的JavaScript原型的真諦!
想必微軟那些設計AJAX架構的工程師看到這個甘露模型時,肯定后悔沒有早點把AJAX部門從美國搬到咱中國的觀音廟來,錯過了觀音菩薩的點化。當然,我們也只能是在代碼的示例中,把Bill?Gates當作對象玩玩,真要讓他放棄上帝轉而皈依我佛肯定是不容易的,機緣未到啊!如果哪天你在微軟新出的AJAX類庫中看到這種甘露模型,那才是真正的緣分!
編程的快樂
在軟件工業迅猛發展的今天,各式各樣的編程語言層出不窮,新語言的誕生,舊語言的演化,似乎已經讓我們眼花繚亂。為了適應面向對象編程的潮流,JavaScript語言也在向完全面向對象的方向發展,新的JavaScript標準已經從語義上擴展了許多面向對象的新元素。與此相反的是,許多靜態的對象語言也在向JavaScript的那種簡潔而幽雅的方向發展。例如,新版本的C#語言就吸收了JSON那樣的簡潔表示法,以及一些其他形式的JavaScript特性。
我們應該看到,隨著RIA(強互聯應用)的發展和普及,AJAX技術也將逐漸淡出江湖,JavaScript也將最終消失或演化成其他形式的語言。但不管編程語言如何發展和演化,編程世界永遠都會在“數據”與“代碼”這千絲萬縷的糾纏中保持著無限的生機。只要我們能看透這一點,我們就能很容易地學習和理解軟件世界的各種新事物。不管是已熟悉的過程式編程,還是正在發展的函數式編程,以及未來量子糾纏態的大規模并行式編程,我們都有足夠的法力來化解一切復雜的難題。
佛最后淡淡地說:只要我們放下那些表面的“類”,放下那些對象的“自我”,就能達到一種“對象本無根,類型亦無形”的境界,從而將自我融入到整個宇宙的生命輪循環中。我們將沒有自我,也沒有自私的欲望,你就是我,我就是你,你中有我,我中有你。這時,我們再看這生機勃勃的編程世界時,我們的內心將自然生起無限的慈愛之心,這種慈愛之心不是虛偽而是真誠的。關愛他人就是關愛自己,就是關愛這世界中的一切。那么,我們的心是永遠快樂的,我們的程序是永遠快樂的,我們的類是永遠快樂的,我們的對象也是永遠快樂的。這就是編程的極樂!
說到這里,在座的比丘都猶如醍醐灌頂,心中豁然開朗。看看左邊這位早已喜不自禁,再看看右邊那位也是心花怒放。
驀然回首時,唯見君拈花微笑...
原著:李戰(leadzen).深圳?2008-2-23
打包文件下載
總結
以上是生活随笔為你收集整理的javascript 真经_悟透JavaScript整理版的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 红队作业 | 社会工程学实践 之 手把手
- 下一篇: (转载)悟透JavaScript