首頁 > 開發者 > JavaScript

從零開始學習jQuery之你必須知道的JavaScript

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近面試過一些人, 發現即使經驗豐富的開發人員, 對於一些基礎的理論和細節也常常會模糊. 寫本文是因為就我自己而言第一次學習下面的內容時發現自己確實有所收穫和感悟. 其實我們容易忽視的javascript的細節還有更多, 本文僅是冰山一角. 希望大家都能通過本文有所斬獲.

一. Javascript物件導向

Javascript是一門物件導向的語言, 雖然很多書上都有講解,但還是有很多初級開發人員不瞭解.

建立對象

ps: 以前寫過一篇詳細的建立對象的文章(原型方法, Factory 方法等)但是找不到了, 回頭如果還能找到我再添加進來.下面僅僅簡單介紹.

在C#裡我們使用new關鍵字建立對象, 在javascript中也可以使用new關鍵字:

 
    
  
  1. var objectA = new Object(); 
    2.

但是實際上"new"可以省略:

 
    
  
  1. var objectA = Object(); 
    2.

但是我建議為了保持文法一直, 總是帶著new關鍵字聲明一個對象.

建立屬性並賦值

在javascript中屬性不需要聲明, 在賦值時即自動建立:

 
    
  
  1. objectA.name = "my name"; 
    2.

訪問屬性

一般我們使用"."來分層次的訪問對象的屬性:

 
    
  
  1. alert(objectA.name); 
    2.

嵌套屬性

對象的屬性同樣可以是任何javascript對象:

 
    
  
  1. var objectB = objectA;  
    2. 
  
  2. objectB.other = objectA;  
    3. 
  
  3. //此時下面三個值相當, 並且改變其中任何一個值其餘兩個值都改變  
    4. 
  
  4. objectA.name;  
    5. 
  
  5. objectB.name;  
    6. 
  
  6. objectB.other.name; 
    7.

使用索引

如果objectA上有一個屬性名稱為"school.college", 那麼我們沒法通過"."訪問,因為"objectA.school.college"語句是指尋找objectA的school屬性對象的college屬性.

這種情況我們需要通過索引設定和訪問屬性:

 
    
  
  1. objectA["school.college"] = "BITI";  
    2. 
  
  2. alert(objectA["school.college"]); 
    3.

下面幾個語句是等效的:

 
    
  
  1. objectA["school.college"] = "BITI";  
    2. 
  
  2.  var key = "school.college" 
    3. 
  
  3. alert(objectA["school.college"]);  
    4. 
  
  4. alert(objectA["school" + "." + "college"]);          
    5. 
  
  5. alert(objectA[key]); 
    6.

JSON 格式文法

JSON是指Javascript Object Notation, 即Javascript對象標記法.

我們可以用下面的語句聲明一個對象,同時建立屬性:

 
    
  
  1. //JSON  
    2. 
  
  2.         var objectA = {  
    3. 
  
  3.             name: "myName",  
    4. 
  
  4.             age: 19,  
    5. 
  
  5.             school:  
    6. 
  
  6.             {  
    7. 
  
  7.                 college: "大學",  
    8. 
  
  8.                 "high school": "高中"   
    9. 
  
  9.             },  
    10. 
  
  10.             like:["睡覺","C#","還是睡覺"]  
    11. 
  
  11.         } 
    12.

JSON的文法格式是使用"{"和"}"表示一個對象, 使用"屬性名稱:值"的格式來建立屬性, 多個屬性用","隔開.

上例中school屬性又是一個對象. like屬性是一個數組. 使用JSON格式的字串建立完對象後, 就可以用"."或者索引的形式訪問屬性:

 
    
  
  1. objectA.school["high school"];  
    2. 
  
  2. objectA.like[1]; 
    3.

靜態方法與執行個體方法

靜態方法是指不需要聲明類的執行個體就可以使用的方法.

執行個體方法是指必須要先使用"new"關鍵字聲明一個類的執行個體, 然後才可以通過此執行個體訪問的方法.

 
    
  
  1. function staticClass() { }; //聲明一個類  
    2. 
  
  2.    staticClass.staticMethod = function() { alert("static method") }; //建立一個靜態方法  
    3. 
  
  3.    staticClass.prototype.instanceMethod = function() { "instance method" }; //建立一個執行個體方法 
    4.

上面首先聲明了一個類staticClass, 接著為其添加了一個靜態方法staticMethod 和一個動態方法instanceMethod. 區別就在於添加動態方法要使用prototype原型屬性.

對於靜態方法可以直接調用:

 
    
  
  1. staticClass.staticMethod(); 
    2.

但是動態方法不能直接調用:

 
    
  
  1. staticClass.instanceMethod(); //語句錯誤, 無法運行. 
    2.

需要首先執行個體化後才能調用:

 
    
  
  1. var instance = new staticClass();//首先執行個體化  
    2. 
  
  2. instance.instanceMethod(); //在執行個體上可以調用執行個體方法  
    3.

二. 全域對象是window屬性

通常我們在 

    

    然而我們還應該知道, 實際上全域變數objectA是建立在window對象上, 可以通過window對象訪問到:
    

     
      
  
    1. window.objectA 
      2. 
 
    

    三. 函數究竟是什麼
    

    我們都知道如何建立一個全域函數以及如何調用:
    

     
      
  
    1. function myMethod()  
      2. 
  
    2. {  
      3. 
  
    3. alert("Hello!");  
      4. 
  
    4. }   
      5. 
  
    5. myMethod();  
      6. 
 
    

    其實同全域對象一樣, 使用function關鍵字建立的方法(也可以建立類)的名稱, 實際上是為window對象建立了myMethod屬性, 並且值是一個匿名方法, 上面的語句等同於:
    

     
      
  
    1. window.myMethod = function()  
      2. 
  
    2. {  
      3. 
  
    3. alert("Hello!");  
      4. 
  
    4. } 
      5. 
 
    

    無論使用哪種方式聲明, 實際儲存時都是使用函數名建立window對象的屬性. 並且值只有函數體沒有函數名稱.
    

    所以,下面三種聲明方式是等效的:
    

     
      
  
    1. function myMethod()  
      2. 
  
    2. {  
      3. 
  
    3. alert("Hello!");  
      4. 
  
    4. }  
      5. 
  
    5. window.myMethod = function()  
      6. 
  
    6. {  
      7. 
  
    7. alert("Hello!");  
      8. 
  
    8. }  
      9. 
  
    9. myMethod = function()  
      10. 
  
    10. {  
      11. 
  
    11. alert("Hello!");  
      12. 
  
    12. } 
      13. 
 
    

    四. "this"究竟是什麼
    

    在C#中,this變數通常指類的當前執行個體. 在javascript則不同, javascript中的"this"是函數上下文,不是由聲明決定,而是由如何調用決定.因為全域函數其實就是window的屬性, 所以在頂層調用全域函數時的this是指window對象.
    

    下面的例子可以很好的說明這一切:
    

     
      
  
    1. var o1 = { name: "o1 name" };  
      2. 
  
    2.         window.name = "window name";  
      3. 
  
    3.  
      4. 
  
    4.         function showName()  
      5. 
  
    5.         {  
      6. 
  
    6.             alert(this.name);  
      7. 
  
    7.         }          
      8. 
  
    8.           
      9. 
  
    9.         o1.show = showName;  
      10. 
  
    10.         window.show = showName;  
      11. 
  
    11.  
      12. 
  
    12.         showName();  
      13. 
  
    13.         o1.show();  
      14. 
  
    14.         window.show(); 
      15. 
 
    

    結果:
    

    

    結果證明在頂層調用函數和使用window對象調用函數時, this都指向window對象. 而在對象中調用函數時this指向當前對象.
    

    五. javascript中的閉包
    

    閉包的概念比較難以理解, 先看閉包的定義:
    

    閉包是一個擁有許多變數和綁定了這些變數的環境的運算式(通常是一個函數)，因而這些變數也是該運算式的一部分。
    

    簡單表達:
    

    閉包就是function執行個體以及執行function執行個體時來自環境的變數.
    

    先看下面的例子:
    

     
      
  
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      2. 
  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. 
  
    3. <head>  
      4. 
  
    4.     <title></title>  
      5. 
  
    5. </head>  
      6. 
  
    6. <body>  
      7. 
  
    7.     <div id="divResult"></div>  
      8. 
  
    8.     <script type="text/javascript">  
      9. 
  
    9.         function start()  
      10. 
  
    10.         {  
      11. 
  
    11.             var count = 0;  
      12. 
  
    12.             window.setInterval(function()  
      13. 
  
    13.             {  
      14. 
  
    14.                 document.getElementById("divResult").innerHTML += count + "<br/>";  
      15. 
  
    15.                 count++;  
      16. 
  
    16.             }, 3000);  
      17. 
  
    17.         };  
      18. 
  
    18.         start();  
      19. 
  
    19.     </script>  
      20. 
  
    20. </body>  
      21. 
  
    21. </html> 
      22. 
 
    

     
      

      count是start函數體內的變數, 通常我們理解count的作用於是在start()函數內, 在調用start()函數結束後應該也會消失.但是此樣本的結果是count變數會一直存在,並且每次被加1:
      

      

      因為count變數是setInterval中建立的匿名函數(就是包含count++的函數)的閉包的一部分!
      

      再通俗的講, 閉包首先就是函數本身, 比如上面這個匿名函數本身, 同時加上在這個函數運行時需要用到的count變數.
      

      javascript中的閉包是隱式的建立的, 而不像其他支援閉包的語言那樣需要顯式建立. 我們在C#語言中很少碰到是因為C#中無法在方法中再次聲明方法. 而在一個方法中調用另一個方法通常使用參數傳遞資料.
      

        
 
      1. jQuery實戰之仿Flash跳動的按鈕效果
        2. 
 
      2. AJAX/PHP/JQuery/CSS設計拖拉式購物車
        3. 
 
      3. 分享24款非常有用的jQuery外掛程式
        4. 
 
      4. 分享7個超棒的學習jQuery的網站
        5. 
 
      5. jQuery拖動布局實現排序結果同步資料庫
        6. 

       

       

      

      
                
      
                    
      本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。
      
                
      
            
      

                                                                    
      
        
      
            
      
                
      
                                        
      
                        

                    
      
                
      
                
      
    
      
                    
      聯繫我們
      
            
      該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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 
      
              
      
                Get Started for Free
              
      
            
      
          
      
          
      
            
      
              
        
                
      • 
                  
        Sales Support
        
                  
        
                    1 on 1 presale consultation
                  
        
                  
        
                    Chat
                    Contact Sales
                  
        
                
        • 
                
      • 
                  
        After-Sales Support
        
                  
        
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
        
                  
        
                    Open a Ticket
                  
        
                
        • 
                
      • 
                  
        
                  
         Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
        
                  
        
                    Learn More
                  
        
                
        •