從零開始學(xué)習(xí)jQuery之你必須知道的JavaScript
最近面試過一些人, 發(fā)現(xiàn)即使經(jīng)驗豐富的開發(fā)人員, 對于一些基礎(chǔ)的理論和細節(jié)也常常會模糊. 寫本文是因為就我自己而言第一次學(xué)習(xí)下面的內(nèi)容時發(fā)現(xiàn)自己確實有所收獲和感悟. 其實我們?nèi)菀缀鲆暤膉avascript的細節(jié)還有更多, 本文僅是冰山一角. 希望大家都能通過本文有所斬獲.
一. Javascript面向?qū)ο?/STRONG>
Javascript是一門面向?qū)ο蟮恼Z言, 雖然很多書上都有講解,但還是有很多初級開發(fā)者不了解.
創(chuàng)建對象
ps: 以前寫過一篇詳細的創(chuàng)建對象的文章(原型方法, 工廠方法等)但是找不到了, 回頭如果還能找到我再添加進來.下面僅僅簡單介紹.
在C#里我們使用new關(guān)鍵字創(chuàng)建對象, 在javascript中也可以使用new關(guān)鍵字:
- var objectA = new Object();
但是實際上"new"可以省略:
- var objectA = Object();
但是我建議為了保持語法一直, 總是帶著new關(guān)鍵字聲明一個對象.
創(chuàng)建屬性并賦值
在javascript中屬性不需要聲明, 在賦值時即自動創(chuàng)建:
- objectA.name = "my name";
訪問屬性
一般我們使用"."來分層次的訪問對象的屬性:
- alert(objectA.name);
嵌套屬性
對象的屬性同樣可以是任何javascript對象:
- var objectB = objectA;
- objectB.other = objectA;
- //此時下面三個值相當(dāng), 并且改變其中任何一個值其余兩個值都改變
- objectA.name;
- objectB.name;
- objectB.other.name;
使用索引
如果objectA上有一個屬性名稱為"school.college", 那么我們沒法通過"."訪問,因為"objectA.school.college"語句是指尋找objectA的school屬性對象的college屬性.
這種情況我們需要通過索引設(shè)置和訪問屬性:
- 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對象表示法.
我們可以用下面的語句聲明一個對象,同時創(chuàng)建屬性:
- //JSON
- var objectA = {
- name: "myName",
- age: 19,
- school:
- {
- college: "大學(xué)",
- "high school": "高中"
- },
- like:["睡覺","C#","還是睡覺"]
- }
JSON的語法格式是使用"{"和"}"表示一個對象, 使用"屬性名稱:值"的格式來創(chuàng)建屬性, 多個屬性用","隔開.
上例中school屬性又是一個對象. like屬性是一個數(shù)組. 使用JSON格式的字符串創(chuàng)建完對象后, 就可以用"."或者索引的形式訪問屬性:
- objectA.school["high school"];
- objectA.like[1];
靜態(tài)方法與實例方法
靜態(tài)方法是指不需要聲明類的實例就可以使用的方法.
實例方法是指必須要先使用"new"關(guān)鍵字聲明一個類的實例, 然后才可以通過此實例訪問的方法.
- function staticClass() { }; //聲明一個類
- staticClass.staticMethod = function() { alert("static method") }; //創(chuàng)建一個靜態(tài)方法
- staticClass.prototype.instanceMethod = function() { "instance method" }; //創(chuàng)建一個實例方法
上面首先聲明了一個類staticClass, 接著為其添加了一個靜態(tài)方法staticMethod 和一個動態(tài)方法instanceMethod. 區(qū)別就在于添加動態(tài)方法要使用prototype原型屬性.
對于靜態(tài)方法可以直接調(diào)用:
- staticClass.staticMethod();
但是動態(tài)方法不能直接調(diào)用:
- staticClass.instanceMethod(); //語句錯誤, 無法運行.
需要首先實例化后才能調(diào)用:
- var instance = new staticClass();//首先實例化
- instance.instanceMethod(); //在實例上可以調(diào)用實例方法
二. 全局對象是window屬性
通常我們在
然而我們還應(yīng)該知道, 實際上全局變量objectA是創(chuàng)建在window對象上, 可以通過window對象訪問到:
- window.objectA
三. 函數(shù)究竟是什么
我們都知道如何創(chuàng)建一個全局函數(shù)以及如何調(diào)用:
- function myMethod()
- {
- alert("Hello!");
- }
- myMethod();
其實同全局對象一樣, 使用function關(guān)鍵字創(chuàng)建的方法(也可以創(chuàng)建類)的名稱, 實際上是為window對象創(chuàng)建了myMethod屬性, 并且值是一個匿名方法, 上面的語句等同于:
- window.myMethod = function()
- {
- alert("Hello!");
- }
無論使用哪種方式聲明, 實際保存時都是使用函數(shù)名創(chuàng)建window對象的屬性. 并且值只有函數(shù)體沒有函數(shù)名稱.
所以,下面三種聲明方式是等效的:
- function myMethod()
- {
- alert("Hello!");
- }
- window.myMethod = function()
- {
- alert("Hello!");
- }
- myMethod = function()
- {
- alert("Hello!");
- }
四. "this"究竟是什么
在C#中,this變量通常指類的當(dāng)前實例. 在javascript則不同, javascript中的"this"是函數(shù)上下文,不是由聲明決定,而是由如何調(diào)用決定.因為全局函數(shù)其實就是window的屬性, 所以在頂層調(diào)用全局函數(shù)時的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();
結(jié)果:
結(jié)果證明在頂層調(diào)用函數(shù)和使用window對象調(diào)用函數(shù)時, this都指向window對象. 而在對象中調(diào)用函數(shù)時this指向當(dāng)前對象.
五. javascript中的閉包
閉包的概念比較難以理解, 先看閉包的定義:
閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式(通常是一個函數(shù))，因而這些變量也是該表達式的一部分。
簡單表達:
閉包就是function實例以及執(zhí)行function實例時來自環(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)該也會消失.但是此示例的結(jié)果是count變量會一直存在,并且每次被加1:
因為count變量是setInterval中創(chuàng)建的匿名函數(shù)(就是包含count++的函數(shù))的閉包的一部分!
再通俗的講, 閉包首先就是函數(shù)本身, 比如上面這個匿名函數(shù)本身, 同時加上在這個函數(shù)運行時需要用到的count變量.
javascript中的閉包是隱式的創(chuàng)建的, 而不像其他支持閉包的語言那樣需要顯式創(chuàng)建. 我們在C#語言中很少碰到是因為C#中無法在方法中再次聲明方法. 而在一個方法中調(diào)用另一個方法通常使用參數(shù)傳遞數(shù)據(jù).
【編輯推薦】
