jQuery 劇場版你必須知道的javascript

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 劇場版你必須知道的javascript

編輯：JQuery特效代碼

一.摘要

本文是jQuery系列教程的劇場版, 即和jQuery這條主線無關, 主要介紹大家平時會忽略的一些javascript細節. 適合希望鞏固javascript理論知識和基礎知識的開發人員閱讀.

二.前言

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

三.Javascript面向對象

Javascript是一門面向對象的語言, 雖然很多書上都有講解,但還是有很多初級開發者不了解.

創建對象

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

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

var objectA = new Object();

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

var objectA = Object();

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

創建屬性並賦值

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

objectA.name = "my name";

訪問屬性

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

alert(objectA.name);

嵌套屬性

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

var objectB = objectA;
objectB.other = objectA;
//此時下面三個值相當, 並且改變其中任何一個值其余兩個值都改變

objectA.name;
objectB.name;
objectB.other.name;

使用索引

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

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

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

下面幾個語句是等效的:

    objectA["school.college"] = "BITI";
    var key = "school.college"
    alert(objectA["school.college"]);
    alert(objectA["school" + "." + "college"]);    
    alert(objectA[key]);

JSON 格式語法

JSON是指Javascript Object Notation, 即Javascript對象表示法.

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

    //JSON
    var objectA = {
      name: "myName",
      age: 19,
      school:
      {
        college: "大學",
        "high school": "高中" 
      },
      like:["睡覺","C#","還是睡覺"]
    }

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

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

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

靜態方法與實例方法

靜態方法是指不需要聲明類的實例就可以使用的方法.

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

    function staticClass() { }; //聲明一個類
    staticClass.staticMethod = function() { alert("static method") }; //創建一個靜態方法
    staticClass.prototype.instanceMethod = function() { "instance method" }; //創建一個實例方法

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

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

staticClass.staticMethod();

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

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

需要首先實例化後才能調用:

    var instance = new staticClass();//首先實例化
    instance.instanceMethod(); //在實例上可以調用實例方法

四.全局對象是window屬性

通常我們在<script>標簽中聲明一個全局變量, 這個變量可以供當前頁面的任何方法使用:

  <script type="text/javascript">
    var objectA = new Object();
  </script>

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

window.objectA

五.函數究竟是什麼

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

    function myMethod()
    {
      alert("Hello!");
    }

    myMethod();

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

    window.myMethod = function()
    {
      alert("Hello!");
    }

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

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

    function myMethod()
    {
      alert("Hello!");
    }

    window.myMethod = function()
    {
      alert("Hello!");
    }

    myMethod = function()
    {
      alert("Hello!");
    }

六."this"究竟是什麼

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

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

    var o1 = { name: "o1 name" };
    window.name = "window name";

    function showName()
    {
      alert(this.name);
    }    
    
    o1.show = showName;
    window.show = showName;

    showName();
    o1.show();
    window.show();

結果:

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

七.javascript中的閉包

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

閉包是一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。

簡單表達:

閉包就是function實例以及執行function實例時來自環境的變量.

先看下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <div id="divResult"></div>
  <script type="text/javascript">
    function start()
    {
      var count = 0;
      window.setInterval(function()
      {
        document.getElementById("divResult").innerHTML += count + "<br/>";
        count++;
      }, 3000);
    };
    start();
  </script>
</body>
</html>

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