學習內容
- JavaScript函數
- JavaScript類和對象
- 解析JSON數據
能力目標
- 深入瞭解JavaScript函數
- 熟悉JavaScript面向對象編程
- 熟練進行JSON數據解析
本章簡介
自JavaScript誕生以來，其功能由最初簡單地實現客戶端有效性驗證發展到構建豐富的用戶界面效果，始終從用戶角度提升體驗效果。前面我們已經學習了JavaScript的基礎理論知識，包括其語法、變量、函數、事件、數組及BOM / DOM對象，可以順利地進行前端開發。但是，JavaScript還有一些高級技術需要我們瞭解和掌握，像類、對象、匿名函數、JSON等，本章將學習這些知識。
核心技能部分
1.1 JavaScript回顧
JavaScript是一種基於對象和事件驅動的腳本語言，由瀏覽器負責解釋、執行。JavaScript分爲三大部分：ECMAScript、BOM和DOM。
ECMAScript是核心，包括語法、變量和數據類型、運算符、邏輯控制語句、關鍵字和保留字等。BOM即瀏覽器對象模型，DOM即文檔對象模型。
1.2 函數
JavaScript的核心是函數，大部分的業務邏輯和數據處理都需要交給函數來實現。JavaScript函數分爲命名函數、匿名函數、內部函數和回調函數等。
1.2.1 命名函數
命名函數，顧名思義就是該函數有名字，我們需要通過函數名來調用這個函數。創建命名函數的語法如下所示：
語法
function函數名(參數列表){ 執行語句 return返回值; } |
下面使用命名函數實現一個打招呼的簡單例子，參考代碼如下所示。
示例1.1
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.1</title></head><script>function sayHello(name){alert("hello，" + name);}</script><body οnlοad="sayHello('Jack')"></body></html>上述代碼定義了一個名字叫sayHello的函數，並在頁面的加載事件中調用了該函數。在前面學習JavaScript時，我們寫的其實都是命名函數。
與C#、Java等語言相比，JavaScript函數的參數更具有靈活性，具體表現在以下幾個方面：
函數即使聲明瞭參數，調用時也可以不給參數傳值。
函數被調用時將自動創建一個arguments隱含對象，負責管理參數。
參數和返回值可以是任何類型。
函數可以不需要return語句返回值，沒有return語句時函數的返回值是undefined。
arguments是函數的隱含對象，調用函數時傳遞的參數值都默認封裝到了該對象（數組）中。下面通過一個示例演示arguments隱含對象的用法，參考代碼如示例1.2所示。
示例1.2
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.2</title></head><body><script type="text/javascript">function fnArgs(){var result = '';for (var i = 0; i < arguments.length; i++){result += arguments[i] + ',';}result = result.substring(0, result.length - 1);return result;}alert('爲fnArgs()函數傳遞的參數的值是：' + fnArgs(3, '鄭州', 3.14));</script></body></html>
上述代碼定義了一個名字是fnArgs的無參函數，在調用該函數時傳遞了3個值示。
1.2.2 匿名函數
在JavaScript中，函數可以沒有名字，稱之爲匿名函數。下面通過一個示例來演示匿名函數的用法，參考代碼如下所示。
示例1.3
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.3</title></head><body></body></html><script>//創建匿名函數var fn=function(){return a+b;};//通過變量名調用匿名函數var a=10,b=20;alert(fn(a,b));</script>上述代碼在使用function關鍵字創建函數時並沒有給函數命名，而是把函數賦值給一個變量，通過該變量來調用函數。
在JavaScript中，可以把某個函數定義在另一個函數內，稱之爲內部函數。內部函數可以出現在命名函數裏，也可以出現在匿名函數中。
下面通過一個示例來演示內部函數的用法，參考代碼如下所示。
示例1.4
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.4</title></head><body></body></html><script>//在命名函數中創建內部函數function sayHello(name){function temp(){alert("hello,"+name);}temp();}//調用sayHello("Jack");
//在匿名函數中創建內部函數
var func=function(){return function(){alert("函數返回值是一個內部函數");}};//調用func()();</script>上述代碼分別在命名函數和匿名函數中創建了內部函數。對於命名函數中的內部函數來說，定義和調用都需要放在命名函數內。對於匿名函數中的內部函數來說，由於函數沒名字，所以在定義內部函數的同時就需要使用return關鍵字把這個函數返回。另外，在調用匿名內部函數時，需要兩個()。
1.2.4 回調函數
回調即CallBack，它不是JavaScript語言特有的，屬於一種編程設計，早在C語言中就已經出現了。通常情況下，當我們需要調用某個類或類的方法時會這樣編寫代碼：
Obj o=new Obj(); //創建Obj類的對象
o.m1(); //調用m1方法
m1方法在編譯期已經確定，開發人員知道運行時會執行什麼代碼，這就是我們經常說的“調用”，即Call。但有的時候Call並不能滿足業務需求，我們需要“回調”，即CallBack，下面是一個回調的例子。
示例1.5<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.5</title></head><body><script>function test(name,cb){document.write(name+"在"+cb());}function cb1(){return "喫飯";}function cb2(){return "學習";}test("張三丰",cb1);</script></body></html>
上述代碼定義了三個函數，在調用test函數時，把cb1或cb2函數作爲參數進行傳遞
test函數在編譯期無法確定接下來執行什麼代碼，它將變得非常靈活，傳過來什麼函數就執行什麼代碼。BOM中的定時器setTimeOut和setInterval函數採用的就是回調函數的設計，因爲定時器在編譯期無法確定將來會調用什麼函數、執行什麼代碼。
1.3 JavaScript面向對象編程基礎
JavaScript是基於對象的解釋性語言，所有數據都是對象。在JavaScript中並沒有class的概念，但是可以通過對象和類的模擬來實現面向對象編程。
1.3.1 類的模擬
ECMAScript內置了幾種引用類型：Object、Boolean、Number、String。其實JavaScript也支持自定義類型。ECMAScript最令人感興趣的可能莫過於函數實際上就是功能完整的類，所以我們可以使用函數來實現類的模擬。
類是自定義類型，只有定義後才能用於創建對象。在JavaScript中沒有class，但可以通過使用關鍵字function和this定義類模板。具體語法如下所示：
語法
function 類名 (參數1, 參數2, … 參數n) { this.屬性名=參數1; this.屬性名=參數n; this.方法名=function(){ }; ... ... } |
下面是通過function自定義一個類的例子，參考代碼如下所示。
示例1.6<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.6</title></head><body><script>function Teacher(n,s,a){this.name=n;this.sex=s;this.age=a;this.getDetails=function(){document.write('教員的姓名：'+this.name+'<br>教員的性別:'+this.sex+'<br>教員的年齡:'+this.age);}}//創建對象var tea=new Teacher('Mary','女',25);//調用方法tea.getDetails();</script></body></html>
上述代碼首先使用function模擬定義了一個教員類，並通過this關鍵字定義了該類的一些屬性和方法，然後通過new關鍵字創建了教員類的一個對象，並調用了該對象的getDetails方法。
1.3.2 對象
在JavaScript中，對象被定義爲無序屬性的集合，屬性可以是任何類型的值，包括其他對象或函數。函數作爲屬性值時稱爲“方法”，即對象的行爲。
在JavaScript中，使用new關鍵字調用構造函數創建對象。
語法
var 對象名 = new 構造函數(); |
對象的屬性都通過“.”運算符訪問。如果訪問值是null對象的屬性，將出現空引用錯誤。與普通變量函數相同，對象的屬性可以動態生成。將某個屬性值設置爲null表示刪除該屬性；在函數內部的對象，函數執行完畢後將自動釋放所佔用的資源；在函數外部定義的對象，將其設置爲null後、垃圾收集器將釋放其佔用的資源。
JavaScript還提供了一些內置對象，我們需要了解一下，主要有 Object、Function、Array、String、Date、RegExp、Math、Error等。
Ø Object 對象：它是所有對象的基礎，其他所有對象都從Object對象擴展而來，這一切都通過原型實現。原型是對象的一個屬性，即prototype。Prototype本身是一個對象，每個對象都具有此屬性。JavaScript 中每個對象本身都不包含具體的屬性（但可以動態添加），而是通過原型進行屬性的共享。當獲取一個對象的屬性時，系統首先檢測對象是否直接包含該屬性，如果不包含則從原型屬性中查找；如果仍未找到，則返回 undefined。
關於原型的內容會在後面做詳細介紹。
Ø Function對象：我們經常編寫的函數也是對象（JavaScript 中一切皆對象），所以當使用 function關鍵字定義函數時，實際上是在系統內部創建了一個 Function 對象。以下語法是等價的：
var 函數名 =new Function（形參1，形參2，…，形參n，函數體）；
function 函數名（形參1，形參2，…，形參n）（函數體；}
上述語法中，前一種方式直接調用構造函數創建 Function 對象，後一種方式使用 function 關鍵字定義函數對象。
Ø Error對象：在JavaScript中，代碼在運行時會產生異常對象Error對象，並且可以作爲參數傳遞給catch子句進行處理，也可以使用new關鍵字創建自定義的Error對象。該對象有一個message屬性用來獲得系統異常提示信息。JavaScript中的異常處理跟Java類似，語法如下所示：
語法
<script>
try{
//代碼
}
catch(e) { //e就是產生的異常對象Error
//處理
}
finally{
//代碼
}
</script>
下面我們通過一個例子來演示JavaScript異常處理和Error對象的使用。
示例1.7
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.7</title></head><body><script>try{document.getElementById("vtn").value="test";}catch(e){alert(e.message+"\n對象不存在");}</script></body></html>由於頁面上沒有id是vtn的元素，所以上述代碼在運行時會發生異常，運行效果如圖1.1.9所示。
圖1.1.9 異常處理除了系統拋出異常外，開發人員也可以根據業務需求人工拋出異常，例如下面的代碼。示例1.8<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.8</title></head><body>請輸入分數(百分制):<input type="text" id="vtn" οnblur="check()"/><script>function check(){try{var score=parseFloat(document.getElementById("vtn").value);if(score<0||score>100)throw new Error("成績輸入錯誤");}catch(e){alert(e.message);}}</script></body></html>當用戶輸入的成績不在0~100之間時，上述代碼生成了一個Error對象並使用throw關鍵字進行了拋出，運行效果如圖1.1.10所示。
圖1.1.10 拋出異常
1.4 JavaScript處理JSON格式數據
1.4.1 JSON
JSON即JavaScript Object Notation，是JavaScript對象原生的一種表示形式。它是一種輕量級的、純文本的，用來存儲、傳遞和交換文本信息，類似於XML，但是比XML更小、更快、更容易解析。
JSON的語法規則如下所示：
var 對象名 = {
屬性1 : 屬性值,
屬性2 : 屬性值,
函數 : function(){
//代碼
}
... ...
};
屬性的值可以是：
數字（整數或浮點數）
字符串（必須放在雙引號中）
布爾值
null
下面我們通過一個例子來演示JSON的用法，參考代碼如下所示。
示例1.9
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.9</title></head><body><script>var student= {name:"",age:56,address:"河南省鄭州市",sayHello:function(){alert("大家好,我是"+this.name);}};student.name="張無忌";student.sayHello();</script></body></html>上述代碼使用JSON創建了一個名字是student的對象，包括3個屬性和一個函數。
JSON也可以以數組的形式一次存儲多個對象，語法如下所示：
var 對象數組名 = [
{ 屬性1 : 屬性值 , 屬性2 : 屬性值 },
{ 屬性1 : 屬性值 , 屬性2 : 屬性值 },
{ 屬性1 : 屬性值 , 屬性2 : 屬性值 }... ...
];
下面通過一個例子演示使用JSON存儲多個員工的寫法，參考代碼如下所示。
示例1.10
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.10</title></head><body><script>var employees = [{ firstName:"Bill" , lastName:"Gates" },{ firstName:"George" , lastName:"Bush" },{ firstName:"Thomas" , lastName: "Carter" }];alert("一共有"+employees.length+"個員工：\n"+employees[0].firstName+"\n"+employees[1].firstName+"\n"+employees[2].firstName);</script></body></html>上述代碼通過JSON以數組的形式創建了3個員工對象，在獲取這些對象的信息時需要通過下標。
1.4.2 解析JSON
JSON 最常見的用法是Web服務器把從數據庫中讀取出來的數據轉換成JSON格式的字符串，然後輸出到客戶端，這時客戶端就需要把JSON格式的字符串轉換爲JavaScript對象，然後在網頁中才能使用這些數據。
在客戶端解析JSON格式字符串的方式有兩種：
eval函數
JSON解析器，即JSON . parse ( )
eval函數使用的是JavaScript編譯器，所以能夠執行任何JavaScript代碼，包括解析JSON 字符串。在使用的時候必須把文本包圍在一對小括號中，這樣才能避免語法錯誤。
語法
eval ( "(" + JSON字符串 + ")" );
下面通過一個例子來演示如何使用eval來解析JSON字符串，參考代碼如下所示。
示例1.11
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.11</title></head><body><script> //假設JsonText是從Web服務器端返回的JSON格式的字符串var JsonText='{"persons":[{"name":"jordan","sex":"m","age":"40"},{"name":"bryant","sex":"m","age":"28"}]}';var myjson = eval("("+JsonText+")");document.writeln('轉換後的JSON對象：' + myjson);document.writeln('<br>myjson[0].name=' + myjson.persons[0].name);</script></body></html>上述代碼使用eval函數把一個JSON格式的字符串解析成了一個對象，並輸出了相關信息。
雖然eval函數可以解析JSON格式的字符串，但是建議開發人員要慎用此函數，因爲該函數可以編譯和執行任何JavaScript代碼，存在安全隱患。
使用JSON解析器(parse函數)將JSON字符串解析爲JavaScript對象是更安全的做法。JSON解析器只能識別JSON 文本，而不會編譯腳本。較新的瀏覽器和最新的ECMAScript標準中均包含了原生的對JSON的支持，見表
瀏覽器支持 |
JS庫(框架)支持 |
Firefox (Mozilla) 3.5 |
jQuery |
Internet Explorer 8 |
Yahoo UI |
Chrome |
Prototype |
Opera 10 |
Dojo |
Safari 4 |
ECMAScript 1.5 |
下面通過一個示例來演示JSON解析器的用法，參考代碼如下所示。
示例1.12
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例1.12</title></head><body><script>//假設JsonText是從Web服務器端返回的JSON格式的字符串var JsonText='{"persons":[{"name":"jordan","sex":"m","age":"40"},{"name":"bryant","sex":"m","age":"28"}]}';var myData = JSON.parse(JsonText);document.writeln('<br>轉換後的JSON對象：' + myData);document.writeln('<br>myData[1].name=' + myData.persons[1].name);</script></body></html>上述代碼使用JSON解析器的parse方法把一個JSON格式的字符串解析成了一個對象，並輸出了相關信息。
經過測試，JSON解析器在Firefox 、Chrome等瀏覽器上均能正常使用。
本章總結
本章主要學習了三方面的內容：函數、面向對象編程基礎和處理JSON格式數據。函數包括命名函數、匿名函數、內部函數和回調函數，其中命名函數和匿名函數使用較多。面向對象基礎部分講解了最簡單的類的模擬和對象的創建，爲後續課程的學習進行鋪墊。JavaScript處理JSON數據要求大家必須熟練掌握，這在實際開發中應用頻繁。
任務實訓部分
1：實現簡易計算器
訓練技能點
面向對象編程
函數的定義和調用
需求說明
使用面向對象的編程思想實現簡易計算器，首先自定義一個計算器類，包括兩個屬
性：需要進行運算的第一個數和第二個數；定義四個方法分別實現加、減、乘、除
運算。
實現步驟
（1）實現簡易計算器界面
（2）自定義計算器類，參考代碼如下所示。
function Cal()
{
this.num1=0;
this.num2=0;
this.jia=function(){
return this.num1+this.num2;
};
this.jian=function(){
return this.num1-this.num2;
};
this.cheng=function(){
return this.num1*this.num2;
};
this.chu=function(){
return this.num1/this.num2;
};
}
（3）在【計算】按鈕的單擊事件中創建一個計算器類的對象並調用相應的方法實現計
算功能
2：客戶類
訓練技能點
類的定義
對象的使用
需求說明
先定義一個Customer類，屬性：姓名、性別、年齡和電話；方法：客戶消費；然
後創建對象並調用方法進行測試。
3：解析JSON數據
訓練技能點
JavaScript解析JSON
需求說明
定義一個JSON對象，存儲3個學生信息（姓名、性別、成績）；並逐行輸出該
3個學生的所有信息。
4：解析JSON數據
訓練技能點
JavaScript解析JSON
需求說明
定義一個JSON對象，存儲3個省份信息；再定義三個JSON對象，存儲三個省份
對應的城市信息。把省份信息和城市信息分別填充到兩個下拉列表框中，並實現
級聯特效。
實現步驟
（1）實現省市級聯界面
（2）定義一個JSON對象存儲省份信息，參考代碼如下所示。
var p= [
{ pname:"河南省" , pvalue:"hn" },
{ pname:"廣東省" , pvalue:"gd" },
{ pname:"山東省" , pvalue: "sd" }
];
（3）定義三個JSON對象存儲城市信息
（4）在頁面加載時把JSON對象填充到兩個下拉列表框中，部分參考代碼如下所示。
for(var j=0;j<p.length;j++)
{
var op=new Option(p[j].pname,p[j].pvalue);
document.getElementById("province").options.add(op);
}
（5）省份下拉列表框發生改變時實現級聯效果
鞏固練習
一、選擇題
1. 以下關於JavaScript的說法正確的是（）。
A. JavaScript中的函數都是有名字的，否則無法調用
B. JavaScript和Java一樣使用class關鍵字定義類
C. JavaScript中沒有類的概念，但是可以通過函數進行模擬
D. BOM和DOM是一樣的，叫法不同而已
2. 以下關於JavaScript函數的說法正確的是（）。
A. 在調用函數時，必須匹配函數參數的個數、類型
B. 函數可以有返回值，也可以沒有返回值
C. 內部函數必須定義在命名函數裏，否則無法調用
D. 回調函數是JavaScript獨有的一種設計
3. 以下關於JavaScript面向對象編程的說法錯誤的是（）。
A. JavaScript不支持自定義數據類型
B. JavaScript使用new創建對象
C. JavaScript中的函數也是對象
D. JavaScript不支持異常處理
4. 下列關於JSON說法錯誤的是（）。
A. JSON是一種數據存儲格式
B. JSON是Java原生對象
C. JSON一次只能存儲單個對象
二、上機練習
定義一個JSON數組存儲3本圖書信息，包括圖書名、作者和價格，然後使用JavaScript進行解析並輸出所有的圖書信息。