一.摘要

本文是jQuery系列教程的劇場(chǎng)版, 即和jQuery這條主線(xiàn)無(wú)關(guān), 主要介紹大家平時(shí)會(huì)忽略的一些javascript細(xì)節(jié).  適合希望鞏固javascript理論知識(shí)和基礎(chǔ)知識(shí)的開(kāi)發(fā)人員閱讀.

二.前言

最近面試過(guò)一些人, 發(fā)現(xiàn)即使經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員, 對(duì)于一些基礎(chǔ)的理論和細(xì)節(jié)也常常會(huì)模糊. 寫(xiě)本文是因?yàn)榫臀易约憾缘谝淮螌W(xué)習(xí)下面的內(nèi)容時(shí)發(fā)現(xiàn)自己確實(shí)有所收獲和感悟.  其實(shí)我們?nèi)菀缀鲆暤膉avascript的細(xì)節(jié)還有更多, 本文僅是冰山一角. 希望大家都能通過(guò)本文有所斬獲.

三.Javascript面向?qū)ο?/H2>

Javascript是一門(mén)面向?qū)ο蟮恼Z(yǔ)言,  雖然很多書(shū)上都有講解,但還是有很多初級(jí)開(kāi)發(fā)者不了解. 

創(chuàng)建對(duì)象

ps: 以前寫(xiě)過(guò)一篇詳細(xì)的創(chuàng)建對(duì)象的文章(原型方法, 工廠(chǎng)方法等)但是找不到了, 回頭如果還能找到我再添加進(jìn)來(lái).下面僅僅簡(jiǎn)單介紹.

在C#里我們使用new關(guān)鍵字創(chuàng)建對(duì)象, 在javascript中也可以使用new關(guān)鍵字:

var objectA = new Object();

但是實(shí)際上"new"可以省略:

var objectA = Object();

但是我建議為了保持語(yǔ)法一直, 總是帶著new關(guān)鍵字聲明一個(gè)對(duì)象.

創(chuàng)建屬性并賦值

在javascript中屬性不需要聲明, 在賦值時(shí)即自動(dòng)創(chuàng)建:

objectA.name = "my name";

訪(fǎng)問(wèn)屬性

一般我們使用"."來(lái)分層次的訪(fǎng)問(wèn)對(duì)象的屬性:

alert(objectA.name);

嵌套屬性

對(duì)象的屬性同樣可以是任何javascript對(duì)象:

var objectB = objectA;
objectB.other = objectA;
//此時(shí)下面三個(gè)值相當(dāng), 并且改變其中任何一個(gè)值其余兩個(gè)值都改變

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

使用索引

如果objectA上有一個(gè)屬性名稱(chēng)為"school.college", 那么我們沒(méi)法通過(guò)"."訪(fǎng)問(wèn),因?yàn)?objectA.school.college"語(yǔ)句是指尋找objectA的school屬性對(duì)象的college屬性.

這種情況我們需要通過(guò)索引設(shè)置和訪(fǎng)問(wèn)屬性:

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

下面幾個(gè)語(yǔ)句是等效的:

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

JSON 格式語(yǔ)法

JSON是指Javascript Object Notation, 即Javascript對(duì)象表示法.

我們可以用下面的語(yǔ)句聲明一個(gè)對(duì)象,同時(shí)創(chuàng)建屬性:

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

JSON的語(yǔ)法格式是使用"{"和"}"表示一個(gè)對(duì)象,  使用"屬性名稱(chēng):值"的格式來(lái)創(chuàng)建屬性, 多個(gè)屬性用","隔開(kāi).

上例中school屬性又是一個(gè)對(duì)象. like屬性是一個(gè)數(shù)組. 使用JSON格式的字符串創(chuàng)建完對(duì)象后, 就可以用"."或者索引的形式訪(fǎng)問(wèn)屬性:

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

靜態(tài)方法與實(shí)例方法

靜態(tài)方法是指不需要聲明類(lèi)的實(shí)例就可以使用的方法.

實(shí)例方法是指必須要先使用"new"關(guān)鍵字聲明一個(gè)類(lèi)的實(shí)例, 然后才可以通過(guò)此實(shí)例訪(fǎng)問(wèn)的方法.

    function staticClass() { }; //聲明一個(gè)類(lèi)
    staticClass.staticMethod = function() { alert("static method") }; //創(chuàng)建一個(gè)靜態(tài)方法
    staticClass.prototype.instanceMethod = function() { "instance method" }; //創(chuàng)建一個(gè)實(shí)例方法
   

上面首先聲明了一個(gè)類(lèi)staticClass, 接著為其添加了一個(gè)靜態(tài)方法staticMethod 和一個(gè)動(dòng)態(tài)方法instanceMethod. 區(qū)別就在于添加動(dòng)態(tài)方法要使用prototype原型屬性.

對(duì)于靜態(tài)方法可以直接調(diào)用:

staticClass.staticMethod();

但是動(dòng)態(tài)方法不能直接調(diào)用:

staticClass.instanceMethod(); //語(yǔ)句錯(cuò)誤, 無(wú)法運(yùn)行.

需要首先實(shí)例化后才能調(diào)用:

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

四.全局對(duì)象是window屬性

通常我們?cè)?lt;script>標(biāo)簽中聲明一個(gè)全局變量, 這個(gè)變量可以供當(dāng)前頁(yè)面的任何方法使用:

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

然而我們還應(yīng)該知道, 實(shí)際上全局變量objectA是創(chuàng)建在window對(duì)象上, 可以通過(guò)window對(duì)象訪(fǎng)問(wèn)到:

window.objectA

五.函數(shù)究竟是什么

我們都知道如何創(chuàng)建一個(gè)全局函數(shù)以及如何調(diào)用:

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

    myMethod(); 

其實(shí)同全局對(duì)象一樣, 使用function關(guān)鍵字創(chuàng)建的方法(也可以創(chuàng)建類(lèi))的名稱(chēng), 實(shí)際上是為window對(duì)象創(chuàng)建了myMethod屬性, 并且值是一個(gè)匿名方法, 上面的語(yǔ)句等同于:

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

無(wú)論使用哪種方式聲明, 實(shí)際保存時(shí)都是使用函數(shù)名創(chuàng)建window對(duì)象的屬性. 并且值只有函數(shù)體沒(méi)有函數(shù)名稱(chēng).

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

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

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

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

六."this"究竟是什么

在C#中,this變量通常指類(lèi)的當(dāng)前實(shí)例. 在javascript則不同, javascript中的"this"是函數(shù)上下文,不是由聲明決定,而是由如何調(diào)用決定.因?yàn)槿趾瘮?shù)其實(shí)就是window的屬性, 所以在頂層調(diào)用全局函數(shù)時(shí)的this是指window對(duì)象.

下面的例子可以很好的說(shuō)明這一切:

    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();

結(jié)果:

結(jié)果證明在頂層調(diào)用函數(shù)和使用window對(duì)象調(diào)用函數(shù)時(shí), this都指向window對(duì)象. 而在對(duì)象中調(diào)用函數(shù)時(shí)this指向當(dāng)前對(duì)象.

七.javascript中的閉包

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

閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。

簡(jiǎn)單表達(dá):

閉包就是function實(shí)例以及執(zhí)行function實(shí)例時(shí)來(lái)自環(huán)境的變量.

先看下面的例子:

<!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函數(shù)體內(nèi)的變量, 通常我們理解count的作用于是在start()函數(shù)內(nèi),  在調(diào)用start()函數(shù)結(jié)束后應(yīng)該也會(huì)消失.但是此示例的結(jié)果是count變量會(huì)一直存在,并且每次被加1:

因?yàn)閏ount變量是setInterval中創(chuàng)建的匿名函數(shù)(就是包含count++的函數(shù))的閉包的一部分!

再通俗的講, 閉包首先就是函數(shù)本身, 比如上面這個(gè)匿名函數(shù)本身, 同時(shí)加上在這個(gè)函數(shù)運(yùn)行時(shí)需要用到的count變量.

javascript中的閉包是隱式的創(chuàng)建的, 而不像其他支持閉包的語(yǔ)言那樣需要顯式創(chuàng)建. 我們?cè)贑#語(yǔ)言中很少碰到是因?yàn)镃#中無(wú)法在方法中再次聲明方法. 而在一個(gè)方法中調(diào)用另一個(gè)方法通常使用參數(shù)傳遞數(shù)據(jù).

本文不再詳細(xì)講解閉包, 深入學(xué)習(xí)請(qǐng)參考下面的文章

八.總結(jié)