[轉貼]悟透JavaScript

時間 2019-11-11

原文原文鏈接

看到一篇文章，寫的還不錯，能夠參考：

引子

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

    數據天生就是文靜的，總想保持本身固有的本色；而代碼卻天生活潑，總想改變這個世界。

   你看，數據代碼間的關係與物質能量間的關係有着驚人的類似。數據也是有慣性的，若是沒有代碼來施加外力，她總保持本身原來的狀態。而代碼就象能量，他存在的惟一目的，就是要努力改變數據原來的狀態。在代碼改變數據的同時，也會由於數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些狀況下，數據能夠轉變爲代碼，而代碼卻又有可能被轉變爲數據，或許還存在一個相似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程序一開始產生了一個生命對象life，life誕生時只是一個光溜溜的對象，沒有任何屬性和方法。在第一次生命過程當中，它有了一個身體屬性body，並有了一個say方法，看起來是一個「卵細胞」。在第二次生命過程當中，它又長出了「尾巴」和「腮」，有了tail和gill屬性，顯然它是一個「蝌蚪」。在第三次生命過程當中，它的tail和gill屬性消失了，但又長出了「四條腿」和「肺」，有了legs和lung屬性，從而最終變成了「青蛙」。若是，你的想像力豐富的話，或許還能讓它變成英俊的「王子」，娶個美麗的「公主」什麼的。不過，在看完這段程序以後，請你思考一個問題：

    咱們必定須要類嗎？

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

    「類」，的確能夠幫助咱們理解複雜的現實世界，這紛亂的現實世界也的確須要進行分類。但若是咱們的思想被「類」束縛住了，「類」也就變成了「累」。想象一下，若是一個生命對象開始的時就被規定了固定的「類」，那麼它還能演化嗎？蝌蚪還能變成青蛙嗎？還能夠給孩子們講小蝌蚪找媽媽的故事嗎？

    因此，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函數動態地增長了author和poem屬性。將author和poem屬性設爲不一樣的做者和詩句，在調用Sing()時就能顯示出不一樣的結果。這個示例用一種詩情畫意的方式，讓咱們理解了JavaScript函數就是對象的本質，也感覺到了 JavaScript語言的優美。

好了，以上的講述，咱們應該算理解了function類型的東西都是和object類型同樣的東西，這種東西被咱們稱爲「對象」。咱們的確能夠這樣去看待這些「對象」，由於它們既有「屬性」也有「方法」嘛。但下面的代碼又會讓咱們產生新的疑惑：

     var anObject = {};   // 一個對象
    anObject.aProperty = " Property of object " ;   // 對象的一個屬性
    anObject.aMethod = function (){alert( " Method of object " )}; // 對象的一個方法
     // 主要看下面：
    alert(anObject[ " aProperty " ]);    // 能夠將對象當數組以屬性名做爲下標來訪問屬性
    anObject[ " aMethod " ]();           // 能夠將對象當數組以方法名做爲下標來調用方法
     for ( var 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 " ]();           // 能夠將函數當數組以方法名做爲下標來調用方法
     for ( var s in aFunction)            // 遍歷函數的全部屬性和方法進行迭代化處理
        alert(s + " is a " + typeof (aFunction[s]));

    是的，對象和函數能夠象數組同樣，用屬性名或方法名做爲下標來訪問並處理。那麼，它到底應該算是數組呢，仍是算對象？

    咱們知道，數組應該算是線性數據結構，線性數據結構通常有必定的規律，適合進行統一的批量迭代操做等，有點像波。而對象是離散數據結構，適合描述分散的和個性化的東西，有點像粒子。所以，咱們也能夠這樣問：JavaScript裏的對象究竟是波仍是粒子？

    若是存在對象量子論，那麼答案必定是：波粒二象性！

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

放下對象

    咱們再來看看function與object的超然結合吧。

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

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

    可能對許多程序員來講，這的確是第一次據說。不過，請君看看C++、C#和Java的this，DELPHI的self，還有VB的me，或許你會恍然大悟！固然，也可能只是說句「不過如此」而已。

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

    但對象的「自我意識」在帶給咱們快樂的同時也帶來了痛苦和煩惱。咱們給對象賦予了太多欲望，總但願它們能作更多的事情。然而，對象的自私使得它們互相爭搶系統資源，對象的自負讓對象變得複雜和臃腫，對象的自欺也每每帶來揮之不去的錯誤和異常。咱們爲何會有這麼多的痛苦和煩惱呢？

    爲此，有一我的，在對象樹下，整整想了九九八十一天，終於悟出了生命的痛苦來自於慾望，但究其慾望的根源是來自於自我意識。因而他放下了「自我」，在對象樹下成了佛，今後他開始普度衆生，傳播真經。他的名字就叫釋迦摩尼，而《JavaScript真經》正是他所傳經書中的一本。

    JavaScript中也有this，但這個this卻與C++、C#或Java等語言的this不一樣。通常編程語言的this就是對象本身，而 JavaScript的this卻並不必定！this多是我，也多是你，多是他，反正是我中有你，你中有我，這就不能用原來的那個「自我」來理解 JavaScript這個this的含義了。爲此，咱們必須首先放下原來對象的那個「自我」。

    咱們來看下面的代碼：

    從上面的代碼能夠看出，同一個函數能夠從不一樣的角度來調用，this並不必定是函數自己所屬的對象。this只是在任意對象和function元素結合時的一個概念，是種結合比起通常對象語言的默認結合更加靈活，顯得更加超然和灑脫。

    在JavaScript函數中，你只能把this當作當前要服務的「這個」對象。this是一個特殊的內置參數，根據this參數，您能夠訪問到「這個」對象的屬性和方法，但卻不能給this參數賦值。在通常對象語言中，方法體代碼中的this能夠省略的，成員默認都首先是「本身」的。但 JavaScript卻不一樣，因爲不存在「自我」，當訪問「這個」對象時，this不可省略！

    JavaScript提供了傳遞this參數的多種形式和手段，其中，象BillGates.WhoAmI()和SteveJobs.WhoAmI()這種形式，是傳遞this參數最正規的形式，此時的this就是函數所屬的對象自己。而大多數狀況下，咱們也幾乎不多去採用那些借花仙佛的調用形式。但只我們要明白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操做符結合一個函數的形式來建立對象。例如：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。