悟透javascript(一)

 

引子

   
編程世界裏只存在兩種基本元素,一個是數據,一個是代碼。編程世界就是在數據和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。

    
數據天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。
 
  
你看,數據代碼間的關係與物質能量間的關係有着驚人的相似。數據也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀態。而代碼就象能量,他存在的唯一目的,就是要努力改變數據原來的狀態。在代碼改變數據的同時,也會因爲數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,數據可以轉 變爲代碼,而代碼卻又有可能被轉變爲數據,或許還存在一個類似E=MC2形式的數碼轉換方程呢。然而,就是在數據和代碼間這種即矛盾又統一的運轉中,總能體現出計算機世界的規律,這些規律正是我們編寫的程序邏輯。

   
不過,由於不同程序員有着不同的世界觀,這些數據和代碼看起來也就不盡相同。於是,不同世界觀的程序員們運用各自的方法論,推動着編程世界的進化和發展。
 
   
衆所周知,當今最流行的編程思想莫過於面向對象編程的思想。爲什麼面向對象的思想能迅速風靡編程世界呢?因爲面向對象的思想首次把數據和代碼結合成統一 體,並以一個簡單的對象概念呈現給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的複雜數據結構,劃分成清晰而有序的對象結構,從而理清 了數據與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的編程世界了。

   
在五祖弘忍講授完《對象真經》之後的一天,他對衆弟子們說:經已講完,想必爾等應該有所感悟,請各自寫個偈子來看。大弟子神秀是被大家公認爲悟性最高 的師兄,他的偈子寫道:身是對象樹,心如類般明。朝朝勤拂拭,莫讓惹塵埃!。此偈一出,立即引起師兄弟們的轟動,大家都說寫得太好了。只有火頭僧慧能 看後,輕輕地嘆了口氣,又隨手在牆上寫道:對象本無根,類型亦無形。本來無一物,何處惹塵埃?。然後搖了搖頭,揚長而去。大家看了慧能的偈子都說:寫的什麼亂七八糟的啊,看不懂。師父弘忍看了神秀的詩偈也點頭稱讚,再看慧能的詩偈之後默然搖頭。就在當天夜裏,弘忍卻悄悄把慧能叫到自己的禪房,將 珍藏多年的軟件真經傳授於他,然後讓他趁着月色連夜逃走...

   
後來,慧能果然不負師父厚望,在南方開創了禪宗另一個廣闊的天空。而慧能當年帶走的軟件真經中就有一本是《JavaScript真經》!

迴歸簡單

   
要理解JavaScript,你得首先放下對象和類的概念,回到數據和代碼的本原。前面說過,編程世界只有數據和代碼兩種基本元素,而這兩種元素又有着糾纏不清的關係。JavaScript就是把數據和代碼都簡化到最原始的程度。

    JavaScript
中的數據很簡潔的。簡單數據只有 undefined, null, boolean, numberstring這五種,而複雜數據只有一種,即object。這就好比中國古典的樸素唯物思想,把世界最基本的元素歸爲金木水火土,其他複雜 的物質都是由這五種基本元素組成。

    JavaScript
中的代碼只體現爲一種形式,就是function

   
注意:以上單詞都是小寫的,不要和Number, String, Object, FunctionJavaScript內置函數混淆了。要知道,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程序:

    var life = {};
    
for(life.age = 1; life.age <= 3; life.age++)
    {
        
switch(life.age)
        {
            
case 1: life.body = "卵細胞";
                    life.say = 
function(){alert(this.age+this.body)};
                    
break;
            
case 2: life.tail = "尾巴";
                    life.gill = "
";
                    life.body = "
蝌蚪";
                    life.say = 
function(){alert(this.age+this.body+"-"+this.tail+","+this.gill)};
                    
break;
            
case 3: delete life.tail;
                    
delete life.gill;
                    life.legs = "
四條腿";
                    life.lung = "
";
                    life.body = "
青蛙";
                    life.say = 
function(){alert(this.age+this.body+"-"+this.legs+","+this.lung)};
                    
break;
        };
        life.say();
    };


   
這段JavaScript程序一開始產生了一個生命對象lifelife誕生時只是一個光溜溜的對象,沒有任何屬性和方法。在第一次生命過程中,它有了 一個身體屬性body,並有了一個say方法,看起來是一個卵細胞。在第二次生命過程中,它又長出了尾巴,有了tailgill屬性, 顯然它是一個蝌蚪。在第三次生命過程中,它的tailgill屬性消失了,但又長出了四條腿,有了legslung屬性,從而最終變 成了青蛙。如果,你的想像力豐富的話,或許還能讓它變成英俊的王子,娶個美麗的公主什麼的。不過,在看完這段程序之後,請你思考一個問題:

   
我們一定需要類嗎?

   
還記得兒時那個小蝌蚪找媽媽的童話嗎?也許就在昨天晚,你的孩子剛好是在這個美麗的童話中進入夢鄉的吧。可愛的小蝌蚪也就是在其自身類型不斷演化過程 中,逐漸變成了和媽媽一樣的,從而找到了自己的媽媽。這個童話故事中蘊含的編程哲理就是:對象的是從無到有,又不斷演化,最終又消失於無形之 中的...

    “
,的確可以幫助我們理解複雜的現實世界,這紛亂的現實世界也的確需要進行分類。但如果我們的思想被束縛住了,也就變成了。想象一 下,如果一個生命對象開始的時就被規定了固定的,那麼它還能演化嗎?蝌蚪還能變成青蛙嗎?還可以給孩子們講小蝌蚪找媽媽的故事嗎?

   
所以,JavaScript中沒有,類已化於無形,與對象融爲一體。正是由於放下了這個概念,JavaScript的對象纔有了其他編程語言所沒有的活力。

   
如果,此時你的內心深處開始有所感悟,那麼你已經逐漸開始理解JavaScript的禪機了。

函數的魔力

   
接下來,我們再討論一下JavaScript函數的魔力吧。

    JavaScript
的代碼就只有function一種形式,function就是函數的類型。也許其他編程語言還有procedure method等代碼概念,但在JavaScript裏只有function一種形式。當我們寫下一個函數的時候,只不過是建立了一個function類型 的實體而已。請看下面的程序:

    function myfunc()
    {
        alert("hello");
    };
    
    alert(
typeof(myfunc));


   
這個代碼運行之後可以看到typeof(myfunc)返回的是function。以上的函數寫法我們稱之爲定義式的,如果我們將其改寫成下面的變量式的,就更容易理解了:

    var myfunc = function ()
        {
            alert("hello");
        };
    
    alert(
typeof(myfunc));


   
這裏明確定義了一個變量myfunc,它的初始值被賦予了一個function的實體。因此,typeof(myfunc)返回的也是function。 其實,這兩種函數的寫法是等價的,除了一點細微差別,其內部實現完全相同。也就是說,我們寫的這些JavaScript函數只是一個命了名的變量而已,其 變量類型即爲function,變量的值就是我們編寫的函數代碼體。

   
聰明的你或許立即會進一步的追問:既然函數只是變量,那麼變量就可以被隨意賦值並用到任意地方囉?

   
我們來看看下面的代碼:

    var myfunc = function ()
        {
            alert("hello");
        };
    myfunc(); 
//第一次調用myfunc,輸出hello
    
    myfunc = 
function ()
        {
            alert("yeah");
        };    
    myfunc(); 
//第二次調用myfunc,將輸出yeah


   
這個程序運行的結果告訴我們:答案是肯定的!在第一次調用函數之後,函數變量又被賦予了新的函數代碼體,使得第二次調用該函數時,出現了不同的輸出。

   
好了,我們又來把上面的代碼改成第一種定義式的函數形式:

    function myfunc ()
    {
        alert("hello");
    };
    myfunc(); 
//這裏調用myfunc,輸出yeah而不是hello
    
    
function myfunc ()
    {
        alert("yeah");
    };    
    myfunc(); 
//這裏調用myfunc,當然輸出yeah


   
按理說,兩個簽名完全相同的函數,在其他編程語言中應該是非法的。但在JavaScript中,這沒錯。不過,程序運行之後卻發現一個奇怪的現象:兩次調用都只是最後那個函數裏輸出的值!顯然第一個函數沒有起到任何作用。這又是爲什麼呢?

   
原來,JavaScript執行引擎並非一行一行地分析和執行程序,而是一段一段地分析執行的。而且,在同一段程序的分析執行中,定義式的函數語句會被提 取出來優先執行。函數定義執行完之後,纔會按順序執行其他語句代碼。也就是說,在第一次調用myfunc之前,第一個函數語句定義的代碼邏輯,已被第二個 函數定義語句覆蓋了。所以,兩次都調用都是執行最後一個函數邏輯了。

   
如果把這個JavaScript代碼分成兩段,例如將它們寫在一個html中,並用<script/>標籤將其分成這樣的兩塊:

<script>
    
function myfunc ()
    {
        alert("hello");
    };
    myfunc(); 
//這裏調用myfunc,輸出hello
</script>

<script>
    
function myfunc ()
    {
        alert("yeah");
    };    
    myfunc(); 
//這裏調用myfunc,輸出yeah
</script>


   
這時,輸出纔是各自按順序來的,也證明了JavaScript的確是一段段地執行的。

   
一段代碼中的定義式函數語句會優先執行,這似乎有點象靜態語言的編譯概念。所以,這一特徵也被有些人稱爲:JavaScript預編譯

   
大多數情況下,我們也沒有必要去糾纏這些細節問題。只要你記住一點:JavaScript裏的代碼也是一種數據,同樣可以被任意賦值和修改的,而它的值就是代碼的邏輯。只是,與一般數據不同的是,函數是可以被調用執行的。

   
不過,如果JavaScript函數僅僅只有這點道行的話,這與C++的函數指針,DELPHI的方法指針,C#的委託相比,又有啥稀奇嘛!然而, JavaScript函數的神奇之處還體現在另外兩個方面:一是函數function類型本身也具有對象化的能力,二是函數function與對象 object超然的結合能力。

奇妙的對象

   
先來說說函數的對象化能力。

   
任何一個函數都可以爲其動態地添加或去除屬性,這些屬性可以是簡單類型,可以是對象,也可以是其他函數。也就是說,函數具有對象的全部特徵,你完全可以把 函數當對象來用。其實,函數就是對象,只不過比一般的對象多了一個括號“()”操作符,這個操作符用來執行函數的邏輯。即,函數本身還可以被調用,一般對 象卻不可以被調用,除此之外完全相同。請看下面的代碼:

    function Sing()
    {
        
with(arguments.callee)
          alert(author + "
" + poem);
    };
    Sing.author = "
李白";
    Sing.poem = "
漢家秦地月,流影照明妃。一上玉關道,天涯去不歸";
    Sing();
    Sing.author = "
李戰";
    Sing.poem = "
日出漢家天,月落陰山前。女兒琵琶怨,已唱三千年";
    Sing();


   
在這段代碼中,Sing函數被定義後,又給Sing函數動態地增加了authorpoem屬性。將authorpoem屬性設爲不同的作者和詩句,在 調用Sing()時就能顯示出不同的結果。這個示例用一種詩情畫意的方式,讓我們理解了JavaScript函數就是對象的本質,也感受到了 JavaScript語言的優美。

   
好了,以上的講述,我們應該算理解了function類型的東西都是和object類型一樣的東西,這種東西被我們稱爲對象。我們的確可以這樣去看待這些對象,因爲它們既有屬性也有方法嘛。但下面的代碼又會讓我們產生新的疑惑:

    var anObject = {};  //一個對象
    anObject.aProperty = "Property of object";  //對象的一個屬性
    anObject.aMethod = function(){alert("Method of object")}; //對象的一個方法
    //主要看下面:
    alert(anObject["aProperty"]);   //可以將對象當數組以屬性名作爲下標來訪問屬性
    anObject["aMethod"]();          //可以將對象當數組以方法名作爲下標來調用方法
    forvar s in anObject)           //遍歷對象的所有屬性和方法進行迭代化處理
        alert(s + " is a " + typeof(anObject[s]));


   
同樣對於function類型的對象也是一樣:

    var aFunction = function() {};  //一個函數
    aFunction.aProperty = "Property of function";  //函數的一個屬性
    aFunction.aMethod = function(){alert("Method of function")}; //函數的一個方法
    //主要看下面:
    alert(aFunction["aProperty"]);   //可以將函數當數組以屬性名作爲下標來訪問屬性
    aFunction["aMethod"]();          //可以將函數當數組以方法名作爲下標來調用方法
    forvar s in aFunction)           //遍歷函數的所有屬性和方法進行迭代化處理
        alert(s + " is a " + typeof(aFunction[s]));


   
是的,對象和函數可以象數組一樣,用屬性名或方法名作爲下標來訪問並處理。那麼,它到底應該算是數組呢,還是算對象?

   
我們知道,數組應該算是線性數據結構,線性數據結構一般有一定的規律,適合進行統一的批量迭代操作等,有點像波。而對象是離散數據結構,適合描述分散的和個性化的東西,有點像粒子。因此,我們也可以這樣問:JavaScript裏的對象到底是波還是粒子?

   
如果存在對象量子論,那麼答案一定是:波粒二象性!

   
因此,JavaScript裏的函數和對象既有對象的特徵也有數組的特徵。這裏的數組被稱爲字典,一種可以任意伸縮的名稱值對兒的集合。其實, objectfunction的內部實現就是一個字典結構,但這種字典結構卻通過嚴謹而精巧的語法表現出了豐富的外觀。正如量子力學在一些地方用粒子來 解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用對象還是數組來解釋和處理問題。只要善於把握 JavaScript的這些奇妙特性,就可以編寫出很多簡潔而強大的代碼來。

放下對象

   
我們再來看看functionobject的超然結合吧。

   
在面向對象的編程世界裏,數據與代碼的有機結合就構成了對象的概念。自從有了對象,編程世界就被劃分成兩部分,一個是對象內的世界,一個是對象外的世界。 對象天生具有自私的一面,外面的世界未經允許是不可訪問對象內部的。對象也有大方的一面,它對外提供屬性和方法,也爲他人服務。不過,在這裏我們要談到一 個有趣的問題,就是對象的自我意識

   
什麼?沒聽錯吧?對象有自我意識?

   
可能對許多程序員來說,這的確是第一次聽說。不過,請君看看C++C#JavathisDELPHIself,還有VBme,或許你會恍然大悟!當然,也可能只是說句不過如此而已。

   
然而,就在對象將世界劃分爲內外兩部分的同時,對象的自我也就隨之產生。自我意識是生命的最基本特徵!正是由於對象這種強大的生命力,才使得編程世界充滿無限的生機和活力。

   
但對象的自我意識在帶給我們快樂的同時也帶來了痛苦和煩惱。我們給對象賦予了太多欲望,總希望它們能做更多的事情。然而,對象的自私使得它們互相爭搶 系統資源,對象的自負讓對象變得複雜和臃腫,對象的自欺也往往帶來揮之不去的錯誤和異常。我們爲什麼會有這麼多的痛苦和煩惱呢?
 
   
爲此,有一個人,在對象樹下,整整想了九九八十一天,終於悟出了生命的痛苦來自於慾望,但究其慾望的根源是來自於自我意識。於是他放下了自我,在對象 樹下成了佛,從此他開始普度衆生,傳播真經。他的名字就叫釋迦摩尼,而《JavaScript真經》正是他所傳經書中的一本。

    JavaScript
中也有this,但這個this卻與C++C#Java等語言的this不同。一般編程語言的this就是對象自己,而 JavaScriptthis卻並不一定!this可能是我,也可能是你,可能是他,反正是我中有你,你中有我,這就不能用原來的那個自我來理解 JavaScript這個this的含義了。爲此,我們必須首先放下原來對象的那個自我

   
我們來看下面的代碼:

    function WhoAmI()       //定義一個函數WhoAmI
    {
        alert("I'm " + 
this.name + " of " + typeof(this));
    };
    
    WhoAmI();   
//此時是this當前這段代碼的全局對象,在瀏覽器中就是window對象,其name屬性爲空字符串。輸出:I'm of object

    
var BillGates = {name: "Bill Gates"};
    BillGates.WhoAmI = WhoAmI;  
//將函數WhoAmI作爲BillGates的方法。
    BillGates.WhoAmI();         //此時的thisBillGates。輸出:I'm Bill Gates of object
    
    
var SteveJobs = {name: "Steve Jobs"};
    SteveJobs.WhoAmI = WhoAmI;  
//將函數WhoAmI作爲SteveJobs的方法。
    SteveJobs.WhoAmI();         //此時的thisSteveJobs。輸出:I'm Steve Jobs of object

    WhoAmI.call(BillGates);     
//直接將BillGates作爲this,調用WhoAmI。輸出:I'm Bill Gates of object
    WhoAmI.call(SteveJobs);     //直接將SteveJobs作爲this,調用WhoAmI。輸出:I'm Steve Jobs of object
    
    BillGates.WhoAmI.call(SteveJobs);   
//SteveJobs作爲this,卻調用BillGatesWhoAmI方法。輸出:I'm Steve Jobs of object
    SteveJobs.WhoAmI.call(BillGates);   //BillGates作爲this,卻調用SteveJobsWhoAmI方法。輸出:I'm Bill Gates of object

    WhoAmI.WhoAmI = WhoAmI;     
//WhoAmI函數設置爲自身的方法。
    WhoAmI.name = "WhoAmI";
    WhoAmI.WhoAmI();            
//此時的thisWhoAmI函數自己。輸出:I'm WhoAmI of function
        
    ({name: "nobody", WhoAmI: WhoAmI}).WhoAmI();    
//臨時創建一個匿名對象並設置屬性後調用WhoAmI方法。輸出:I'm nobody of object


   
從上面的代碼可以看出,同一個函數可以從不同的角度來調用,this並不一定是函數本身所屬的對象。this只是在任意對象和function元素結合時的一個概念,是種結合比起一般對象語言的默認結合更加靈活,顯得更加超然和灑脫。

   
JavaScript函數中,你只能把this看成當前要服務的這個對象。this是一個特殊的內置參數,根據this參數,您可以訪問到這個對象的屬性和方法,但卻不能給this參數賦值。在一般對象語言中,方法體代碼中的this可以省略的,成員默認都首先是自己的。但 JavaScript卻不同,由於不存在自我,當訪問這個對象時,this不可省略!

    JavaScript
提供了傳遞this參數的多種形式和手段,其中,象BillGates.WhoAmI()SteveJobs.WhoAmI()這 種形式,是傳遞this參數最正規的形式,此時的this就是函數所屬的對象本身。而大多數情況下,我們也幾乎很少去採用那些借花仙佛的調用形式。但只我 們要明白JavaScript的這個自我與其他編程語言的自我是不同的,這是一個放下了的自我,這就是JavaScript特有的世界觀。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章