1、第第5章章 JavaScript高級編程高級編程課程回顧課程回顧uWeb Service具有以下優勢：n平臺無關性n編程語言無關性n部署、升級和維護Web服務簡單n對于Web服務使用者來說，可以輕易實現多種數據、服務的聚合n成本低n數據不受防火墻阻擋u.NET中創建的Web Service都派生自System.Web.Services.WebService類uWeb服務方法都必須滿足兩個條件：由WebMethod特性標識、public訪問修飾符u簡單對象訪問協議（SOAP）是基于XML的輕量級協議，可以實現在Internet上任意位置調用已發布的Web ServiceuWSDL與SOAP和UD

2、DI（統一描述、發現和集成機制）一起工作，支持Web服務與Internet上的其他服務、應用程序和設備交互作用。UDDI提供了發布和定位Web服務的功能，WSDL描述了Web服務，SOAP為Web服務提供了傳輸消息u在.NET各種類型的應用程序中，都可以通過“添加Web引用”的方式創建客戶端代理類來調用Web Service，也可以通過動態生成客戶端代理類來調用本章內容本章內容uJavaScript變量作用域uJavaScript函數uJavaScript面向對象編程uJavaScript閉包uJavaScript處理JSON數據本章目標本章目標u深入了解JavaScript的變量作用域u能夠

3、使用JavaScript進行面向對象編程u理解JavaScript中閉包的概念和作用u理解JSON數據的格式及使用JavaScript處理JSON數據1. JavaScript1. JavaScript重點回顧重點回顧1.1 數組 u 一個JavaScript數組的元素可以具有任意的數據類型，同一個數組的不同元素可以具有不同的類型，數組的元素設置可以包含其他數組 var a=北京,上海,true,1,20,深圳; with(document) writeln(遍歷數組a的值是：); for(var i=0;ia.length;i+) writeln(a+i+=+ai); 使用 創建數組 var

4、 a=new Array(北京,上海,true,1,20,深圳); with(document) writeln(遍歷數組a的值是：); for(var i=0;ia.length;i+) writeln(a+i+=+ai); 使用new關鍵字創建數組對象Array()數組數組u數組元素 n數組的長度可以通過length屬性獲得，并且數組的長度是可變化的 var a = new Array();/起始長度為0 var b = new Array(5, 4, 3, false,Tom,3.14);/長度為6 var c = new Array(20);/長度為20 /錯誤的數組定義，定義長度必須

5、是整數；否則，至少要2個元素 var d = new Array(3.14); var d=new Array(tom,3.14);/合法,長度為2a3 = Test; /a的長度自動變為4 數組的元素可以是任何類型數據 數組的長度可以變化 數組數組u訪問數組元素 n訪問數組的元素使用運算符，可以通過下標訪問，也可以通過關鍵字訪問 var a = new Array(jack,true,one:one,two:two,three:three);var b = new Array(5, 4, 3, false,Tom,3.14);a1.23 = test;with (document) writ

6、eln(a1.23= + a1.23); writeln(a.length= + a.length);writeln(a2.one= + a2.one);writeln(a2two=+a2two);btrue = true;with (document) writeln(b.length= + b.length); writeln(btrue= + btrue); writeln(b6= + b6); /索引溢出，但不會出錯，值是undefined for (i in b) document.writeln(b+i+=+bi); 為數組a添加了一個元素 訪問第3個元素（對象）的屬性 for i

7、n 遍歷數組元素 1.1 1.1 數組數組u多維數組 n數組元素可以是任何類型的數據（包括另一個數組），可以非常方便地模擬多維數組 var one = new Array(3);for (var i=0;ione.length;i+) onei = new Array(4); for (var j = 0; j onei.length; j+) oneij = (i+1) * (j+1); arrayA = 21, 22, 23, 31, 32, 33,34;for (var i = 0; i arrayA.length; i+) for (var j = 0; j arrayAi.lengt

8、h; j+) document.writeln(arrayA + i + + j + = + arrayAij); 使用new Array()創建多維數組使用 創建多維數組1.1 1.1 數組數組u數組排序 n使用Array對象的sort()方法，該方法允許傳遞一個排序函數作為參數。如果不傳遞參數，則按照ASCII字符順序升序排列 var a = new Array(10, 215, 324, 3, 1254, 300);function sortFunction(one, two) return one - two;a.sort();for (i in a) document.writeln

9、(ai);document.writeln();a.sort(sortFunction);for (i in a) document.writeln(ai); 作為sort()方法的參數傳遞的函數無參數，按ASCII字符順序升序排列傳遞參數，按參數指定的排序規則排序function 函數名（形參列表）執行語句return 返回值；/可選的語句 1.2 1.2 函數函數u命名函數的創建和調用u函數也是一種數據類型，是function類型。所以只要使用function關鍵字標識一個函數名，就可以在大括號內編寫代碼，并且可以被調用、作為其他函數的參數或者作為對象的屬性值var n0 = factor

10、ial$(0);var n10 = factorial$(10);var n20 = factorial$(20);alert(0的階乘為: + n0 + n10的階乘為: + n10 + n20的階乘為: + n20);調用函數 function factorial$(n) var out=1; if (n = 0) return out; for (var i = 1; i = n; i+) out *= i; return out; 創建計算階乘的函數函數函數u函數的參數和返回值n參數名可以重復，但通過此參數名獲取的值為實際傳遞參數的最后一個，如果實際傳遞參數值的個數小于重名參數的個數，

11、那么通過此參數名獲取的值為undefinedn即使聲明了形參，調用時也可以不傳遞參數n不管形參有幾個，傳遞實參可以和形參個數不同n在函數被調用時，會創建一個arguments對象，負責管理參數n參數和返回值都可以是任何類型，包括function類型n函數可以不需要return語句來返回值，即使沒有return語句，函數也會返回值，這種情況下返回值是undefined function fnArgs() var result = ; for (var i = 0; i arguments.length; i+) result += argumentsi + ,; result = result.

12、substring(0, result.length - 1); return result; function fnReturn() function fnArgsIterate() return a + b; var a=5,a=6,b=7;alert(為fnArgs()傳遞的實參是： + fnArgs(3, shanghai, 3.14) + n函數fnReturn()返回值是： + fnReturn() + n為fnArgsInterate()傳遞了重復參數，結果是: + fnArgsIterate(a, a, b);函數函數u內部函數和匿名函數 n在一個函數內部，可以把另一個函數作為

13、數據使用，這就形成了內部函數 var fn = function() return a+b;var a = 10, b = 20;document.writeln(fn(a, b)+);創建匿名函數var func = function() return function() document.writeln(函數返回值是一個內部函數); func()();(function() document.writeln(創建即運行); )(); 創建內部函數調用內部函數小結小結1 1u創建數組的方式有哪幾種？u如何創建多維數組？u如何訪問數組元素？u如何對數組排序2.JavaScript2.Java

14、Script面向對象編程面向對象編程2.1 對象 u對象是無序屬性的集合，屬性可以是任何類型的值，包括其他的對象或函數，當函數作為屬性值時稱作“方法”，即對象的行為 u常用對象的內部屬性 屬性類型說明prototype對象獲得對象原型，用來實現繼承功能class字符串描述對象類型的字符串，使用typeof操作符返回的結果get函數獲取指定屬性名稱的屬性值put函數為指定的屬性賦值canPut函數指定屬性是否可以通過Put進行賦值hasProperty函數是否有指定的屬性delete函數刪除對象指定的屬性defaultValue函數返回對象的默認值construct函數對象的構造函數call函數

15、執行關聯在對象上的代碼（通過函數名調用）對象對象u對象的創建、訪問和釋放 n創建對象var 對象名=new 構造函數()var s = new String();var obj = new Object; /構造函數不需要傳遞參數時，可以省略括號with (document) writeln(s對象的構造函數為: + s.constructor); writeln(Object對象的原型是： + Ototype);Ntotype.add = function(num) return (this + num); document.writeln(Number對

16、象擴展了一個add方法,(5).add(10)=+(5).add(10);document.writeln(obj對象的構造函數的原型是： + totype);s.address = 北京;document.writeln(對象s添加了屬性address，s.address= + s.address);sfn = function(a) return a + this.address;document.writeln(函數屬性返回的值：s.fn(中國)= + s.fn(中國 );s.address = null;s = null;創建對象使用prototy

17、pe屬性為Number對象擴展一個方法 為對象生成一個變量屬性 為對象生成一個函數類型的屬性 移除對象的屬性，釋放對象 對象對象u常用內置對象 nGlobal對象uGlobal對象沒有construct屬性，所以無法使用new操作符構造u沒有call屬性，所以無法像函數一樣調用uGlobal對象只是一個概念，表示全局對象，依據宿主不同而不同。例如在瀏覽器中，window就是Global對象var lan = zh;var money = 3000;function getLan() var money = 5000; var g = this = window;var g = this = w

18、indow; /this指向window /lan是window的屬性，money是window的money屬性，值為3000 document.writeln(g + n + this.lanthis.lan + n+this.parseFloat(this.moneythis.money); /getLan()是window的屬性 window.getLan();window.getLan();所有的變量和函數都是Global對象的屬性，如果有同名，則后定義的覆蓋先定義想想看：this.money的值是3000還是5000？對象對象u常用內置對象 nObject對象：Object對象是所有

19、對象的基礎，任何其他對象都是從Object對象原型擴展而來 如果為Object對象使用原型擴展了屬性，則所有對象都具有此屬性 Ototype.money = 3000;document.writeln(添加了原型屬性money，值為： + Object.money);Object.money=5000 ;document.writeln(生成了對象屬性money，值為： + Object.money);var s = new String();/ String也因為Object原型擴展而擁有了money屬性document.writeln(String對象繼承了money屬性

20、，值為： + s.money);想想看：s.money的值是3000還是5000？對象對象u常用內置對象 nFunction對象：當使用function關鍵字定義了一個函數時，在系統內部實際上時創建了一個Function對象，因為函數也是對象 u函數的調用函數名()； apply(this，函數參數數組);call(this,函數參數列表); var s= new String(); s.money = 1000;/money是String對象的屬性 var money = 2000;/money是window對象的屬性 var func1 = new Function(a, b, docum

21、ent.writeln(a+b);document.writeln(this.money+);); var func2 = function(a, b) document.writeln(a + b); document.writeln(this.money+); /因為沒有傳遞對象引用，所以func1()函數中的this指向window func1(10, 20);/傳遞了對象s,所以func1中的this指向s func1.apply(s, 10, 20);/傳遞的空引用，所以func2中的this指向了window func2.call(null, 10, 20); 使用new關鍵字調用

22、構造函數創建函數對象,this指向因調用方式不同而不同對象對象u常用內置對象 nError對象：可以在發生錯誤時作為參數傳遞給catch子句，也可以使用new關鍵字構造自定義的Error對象 tryvar myerr=new Error(“自定義錯誤”);/自定義錯誤對象throw myerr;/拋出自定義的錯誤對象catch(e)alert(e.message);/message屬性是Error對象最主要的屬性2.2 2.2 類的模擬類的模擬 u實體類 n實體類是自定義類型，需要定義后才可以使用它創建對象。在JavaScript中沒有class，但可以通過用function關鍵字和this關

23、鍵字類定義類模板 function 類名(參數1，參數2參數n)this.屬性名=參數1;this.屬性名=參數2;this.屬性名=參數n;function Teacher(n, s, a) /綁定屬性 = n; this.sex = s; this.age = a;/綁定行為Ttotype.getDetails=function() document.writeln(教員的姓名： + + 教員的性別: + this.sex + 教員的年齡: + this.age); /創建對象var tea = new Teacher(Mary,

24、 女, 25);/調用方法tea.getDetails();function Teacher(n, s, a) /綁定屬性 = n; this.sex = s; this.age = a; /判斷行為是否已經定義過 if (Ttotype.getDetails = undefined) /綁定行為 Ttotype.getDetails = function() document.writeln(教員的姓名： + + 教員的性別: + this.sex + 教員的年齡: + this.age); 直接將行為的綁定放在

25、類定義的括號內 類的模擬類的模擬u類的繼承 n通過原型擴展的方式實現繼承 function Person() = Jack; Ptotype.speak = function()Ptotype.speak = function() document.writeln(Person類的原型擴展的方法speak被繼承); Ptotype.eat = function()Ptotype.eat = function() document.writeln(Person類的原型擴展的方法eat被繼承); funct

26、ion Student() Stotype.study = function() document.writeln(Student類自己的方法); /實現繼承Stotype = new Person();Stotype = new Person(); /測試繼承 var stu = new Student();/繼承的方法stu.speak();stu.speak();stu.eat();stu.eat();/自己的方法stu.study();stu.study();小結小結2 2uGlobal對象與瀏覽器的window對象由什么關系

27、？uapply()與call()方法有什么區別？u如何實現類的繼承？3. JavaScript3. JavaScript閉包閉包 3.1 什么是JavaScript閉包u“閉包”是指一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分 u在函數體內定義另外的函數作為目標對象的方法函數，而這個對象的方法函數反過來引用外層函數體中的臨時變量（閉包是一種間接保持變量值的機制）。當一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包function funcTest() var tmpNum=100; /私有變量 /在函數funcTest內定義

28、另外的函數作為funcTest的方法函數 function innerFuncTest() alert(tmpNum); /引用外層函數funcTest的臨時變量tmpNum return innerFuncTest; /返回內部函數 /調用函數var myFuncTest=funcTest(); var myFuncTest=funcTest(); myFuncTest();/myFuncTest();/彈出100/下面的調用將失敗innerFuncTest();什么是什么是JavaScriptJavaScript閉包閉包u變量作用域n內部函數也可以有自己的變量和函數，但其作用域只能是內部函

29、數體內function funcTest() var tmpNum=100; /私有變量 /在函數funcTest內定義另外的函數作為funcTest的方法函數 function innerFuncTest() var innerVar = 0;var innerVar = 0; alert(innerVar+); alert(tmpNum+); /引用外層函數funcTest的臨時變量tmpNum return innerFuncTest; /返回內部函數 var myFuncTest=funcTest(); myFuncTest();/彈出0后再彈出100innerVar的作用域僅限于函數

30、innerFuncTest()內什么是什么是JavaScriptJavaScript閉包閉包u變量作用域n內部函數可以引用全局變量或函數以及外部函數定義的變量或函數var globalVar = 0;function funcTest() var tmpNum=100; /私有變量 function innerFuncTest() var innerVar = 0; alert(innerVar+);/引用內部函數變量 alert(tmpNum+);alert(tmpNum+); /引用外層函數funcTest的臨時變量tmpNum alert(+globalVar);alert(+globa

31、lVar);/引用全局變量 return innerFuncTest; /返回內部函數var myFuncTest=funcTest(); myFuncTest();/彈出0、100和1什么是什么是JavaScriptJavaScript閉包閉包u變量作用域n如果內部函數引用了位于外部函數中的變量，相當于授權該變量能夠被延遲使用。因此，當外部函數調用完成后，這些變量的內存不會釋放，因為閉包還引用這它們 u在JavaScript中，如果一個對象不再被引用，該對象將被GC回收。如果兩個對象互相引用，而不再被第三者所引用，那么這兩個互相引用的對象也會被回收什么是什么是JavaScriptJavaSc

32、ript閉包閉包u變量作用域n每次通過引用調用內部函數，內部函數內部的局部變量都會被重新創建 var globalVar = 0;function funcTest() var tmpNum=100; /私有變量 /在函數funcTest內定義另外的函數作為funcTest的方法函數 function innerFuncTest() var innerVar = 0; document.writeln(innerVar+ +,+tmpNum+ +,+ +globalVar+); document.writeln(innerVar+ +,+tmpNum+ +,+ +globalVar+); re

33、turn innerFuncTest; /返回內部函數var first=funcTest();first(); /顯示0、100和1first(); /顯示0、101和2，注意：函數的局部變量tmpNum被保存下來，沒有銷毀var second = funcTest();second(); /顯示0、100和3second(); /顯示0、101和4什么是什么是JavaScriptJavaScript閉包閉包u閉包的使用n利用閉包綁定參數為函數引用設置延時 function closureExample(msg) return function() alert(msg); ; /使用閉包解決

34、window.onload = function() var element = document.getElementById(closuretest);if (element) var good = closureExample(這個參數是由閉包綁定的); element.onclick = function() setTimeout(good, 3000); /延遲3秒彈出提示 通過閉包為setTimeout傳入參數什么是什么是JavaScript閉包閉包u閉包的使用n通過對象實例方法關聯函數 function associateObjWithEvent(obj, methodName)

35、 return (function() return objmethodName(this);return objmethodName(this); ); function HtmlEle(elementId) var el =document.getElementById(elementId);if (el) el.onclick = associateObjWithEvent(this, doOnClick);el.onclick = associateObjWithEvent(this, doOnClick); el.onmouseover = associateObjWithEvent

36、(this, doMouseOver); el.onmouseover = associateObjWithEvent(this, doMouseOver); el.onmouseout = associateObjWithEvent(this, doMouseOut); el.onmouseout = associateObjWithEvent(this, doMouseOut); HtmlEtotype.doOnClick = function(element) alert(element);HtmlEtotype.doMouseOver = function(el

37、ement) alert(鼠標移動到元素+element.id +上了);HtmlEtotype.doMouseOut = function(element) alert(鼠標移出了元素 + element.id);var div = new HtmlEle(closuretest);var div = new HtmlEle(closuretest); /使用構造函數創建HtmlEle對象內部函數將作為DOM 元素的事件處理器，this指向obj，即傳入的dom元素 為HtmlEle對象擴展3個屬性，每個屬性的值都是函數類型 3.2 3.2 閉包之間的交互閉包之間的交互 u當存在

38、多個內部函數時，可能會出現意料之外的閉包。此時，假設多個內部函數（閉包）引用了同一個外部函數的變量，則內部函數共享同一個封閉環境。如果重新創建一個全局變量引用內部函數，則變量的值也重新初始化function outerFunc() var outerVar = 0; function innerFunc1() document.writeln(+outerVar); function innerFunc2() outerVar += 5; document.writeln(,+ outerVar+); /返回一個具有兩個屬性的對象 return innerFunc1:innerFunc1,in

39、nerFunc2:innerFunc2;var globalVar = outerFunc();globalVar.innerFunc1();globalVar.innerFunc2();globalVar = outerFunc();globalVar.innerFunc1();globalVar.innerFunc2();小結小結3 3u閉包是什么？u舉例說明閉包有哪些作用4.JavaScript4.JavaScript處理處理JSONJSON格式數據格式數據 4.1 JSON是什么？ uJSON即javascript對象標記，是一種輕量級的數據交換格式uJSON的優勢：n同XML或HTM

40、L相比，JSON 更簡單靈活 nJSON是基于純文本的數據格式，便于在網絡上傳入和解析nJSON的數據格式簡單，但卻可以傳輸任何類型的數據 nJSON是JavaScript原生格式，在JavaScript中處理JSON數據不需要任何n特殊的 API 或工具包 訂單編號:OD-00001,訂單日期:2010-1-23,訂貨人:Tom,訂單詳細:商品編號:SP-20100123,數量:5,單價:120,總價:600, 商品編號:SP-20100124,數量:50,單價:100,總價:5000 JSON數據格式：可以是任何類型的數據，包括JavaScript對象和數組4.2 JavaScript4.

41、2 JavaScript處理處理JSONJSON數據數據 uJavaScript訪問JSON數據直接可以通過“.”運算符訪問JSON數據的屬性，也可以直接使用“=”為屬性賦值function handleJSON() var user = name: Michael, address: city: Beijing, street: Chaoyang Road , postcode: 100025 ; document.write(= + );document.write(user.address.city= + user.address.city); fun

42、ction showJSON() var user =username: Tom, age: 20,info: tel: 123456, cellphone: 98765 ,address: city: beijing, postcode: 222333 , city: newyork, postcode: 555666 with (document) writeln(user.username= + user.usernameuser.username); writeln(user.age= + user.age); writeln(.cellphone= + .cellphone); writeln(user.address0.city=