1、Web ProgrammingSchool of Computer Science and Engineering,South China University of TechnologyLecture 8 面向對象的面向對象的JavaScriptWeb 2.0 Programming Object-Oriented JavaScript2 / 35March 24, 2022South China University of Technology概要概要l學習工具學習工具 l對象和函數 l構造函數和原型 l基礎l多態Web 2.0 Programming Object-Oriented Ja

2、vaScript3 / 35March 24, 2022South China University of Technology學習工具學習工具 Firebug FirebugWeb 2.0 Programming Object-Oriented JavaScript4 / 35March 24, 2022South China University of Technology學習工具學習工具 JavaScript shelll使用書簽版本的shell: 命令會在所打開的頁面中執行 https:/ Web 2.0 Programming Object-Oriented JavaScript5

3、/ 35March 24, 2022South China University of Technology概要概要l學習工具 l對象和函數對象和函數 l構造函數和原型 l繼承 l多態 Web 2.0 Programming Object-Oriented JavaScript6 / 35March 24, 2022South China University of TechnologyJavaScript != Javal類似C語言的語法l類（Classes） l數據類型:原始的:數字類型 1, 3, 1001, 11.12, 2e+3字符串 a, stoyan, 0布爾類型 true |

4、false空（null）未定義對象: 一切都是對象 Web 2.0 Programming Object-Oriented JavaScript7 / 35March 24, 2022South China University of Technology對象對象l每一個對象實際上都是一個內部哈希表 (鍵: 值)l當一個屬性是函數時我們稱之為方法 var obj = ; = my object;obj.shiny = true;var obj = shiny: true, isShiny: function() return this.shiny; ;obj.isShiny()

5、; / trueWeb 2.0 Programming Object-Oriented JavaScript8 / 35March 24, 2022South China University of Technology對象字面量對象字面量l鍵-值對 (Key-value)l用逗號分隔 l被花括號包裹 a: 1, b: testWeb 2.0 Programming Object-Oriented JavaScript9 / 35March 24, 2022South China University of Technology數組數組l數組也是對象 l自動增加屬性l一些有用的方法 l數組字面

6、量 var a = 1,3,2; a01 typeof aobjectvar array = Square, brackets, wrap, the, comma-delimited, elements; Web 2.0 Programming Object-Oriented JavaScript10 / 35March 24, 2022South China University of TechnologyJavaScriptJavaScript對象表示法對象表示法( (JSONJSON) )l對象字面量+ 數組字面量l對象序列化 , 在保存跟傳送對象 時很有用l一個 JSON 字符串可以通

7、過eval() 函數實例化 num: 1, str: abc, arr: 1,2,3var jsonStr = num: 1, str: abc, arr: 1,2,3;obj = eval(jsonStr); Web 2.0 Programming Object-Oriented JavaScript11 / 35March 24, 2022South China University of Technology函數函數l函數是對象 擁有屬性 擁有方法 可以被復制，刪除，擴充.特征 : 可調用（invokable）function say(what) return what;var say

8、= function(what) return what;var say = function say(what) return what; Web 2.0 Programming Object-Oriented JavaScript12 / 35March 24, 2022South China University of Technology函數是對象函數是對象 say.length1 boo var tell = say; tell(doodles)doodles tell.call(null, moo!);moo!Web 2.0 Programming Object-O

9、riented JavaScript13 / 35March 24, 2022South China University of Technology返回值返回值l所有的函數總是返回一個值 l如果函數沒有顯式返回一個值, 它返回的是未定義值未定義值(undefined) l函數可以返回對象,包括其它函數 Web 2.0 Programming Object-Oriented JavaScript14 / 35March 24, 2022South China University of Technology概要概要l學習工具 l對象和函數l構造函數和原型構造函數和原型l繼承l多態Web 2.0

10、 Programming Object-Oriented JavaScript15 / 35March 24, 2022South China University of Technology構造函數構造函數l當使用 new創建時, 函數將返回一個this對象 l在它返回之前，你可以修改 this 對象 l命名約定 : 構造函數： MyConstructor ； 函數：myFunction .var Person = function(name) = name; this.getName = function() return ; ;var me = ne

11、w Person(Stoyan);me.getName(); / StoyanWeb 2.0 Programming Object-Oriented JavaScript16 / 35March 24, 2022South China University of Technology構造函數屬性構造函數屬性 function Person(); var jo = new Person(); jo.constructor = Persontrue var o = ; o.constructor = Objecttrue 1,2.constructor = ArraytrueWeb 2.0 Pro

12、gramming Object-Oriented JavaScript17 / 35March 24, 2022South China University of Technology內置構造函數內置構造函數 lObjectlArraylFunctionlRegExplNumberlStringlBooleanlDatelError, SyntaxError, ReferenceError Web 2.0 Programming Object-Oriented JavaScript18 / 35March 24, 2022South China University of Technology

13、約定約定使用這個方法使用這個方法而不是這種方法而不是這種方法var o = ;var o = new Object();var a = ;var a = new Array();var re = /a-z/gmi;var re = new RegExp( a-z, gmi);var fn = function(a, b) return a + b;var fn = new Function(a, b,return a+b);Web 2.0 Programming Object-Oriented JavaScript19 / 35March 24, 2022South China Univers

14、ity of Technology原型原型lprototype 是函數對象的一個特殊屬性lprototype 不是不是指我們使用的JavaScript 工具包l擴充 prototypel重寫 prototype var boo = function(); typeof totypeobject totype.a = 1; totype.sayAh = function(); totype =a: 1, b: 2; Web 2.0 Programming Object-Oriented JavaScript20 / 35March 24,

15、2022South China University of Technologyprototypeprototype屬性的使用屬性的使用l當一個函數被調用時， prototype 作為構造函數被使用 var Person = function(name) = name;Ptotype.say = function() return ; var dude = new Person(dude); ;dude dude.say();dudesay() 是 prototype對象的一個屬性，但它卻像dude對象的屬性一樣被使用

16、Web 2.0 Programming Object-Oriented JavaScript21 / 35March 24, 2022South China University of TechnologylisPrototypeOf()自帶屬性自帶屬性 vs. prototype vs. prototype包含的屬性包含的屬性 dude.hasOwnProperty(name);true dude.hasOwnProperty(say);false Ptotype.isPrototypeOf(dude);true Ototype.isPrototypeOf

17、(dude);trueWeb 2.0 Programming Object-Oriented JavaScript22 / 35March 24, 2022South China University of Technologyl對象有一個隱式鏈接，鏈接到創建它們的對象的構造函數的 prototype _proto_proto_ dude._proto_.hasOwnProperty(say)true totype? / Trick question dude._proto_._proto_.hasOwnProperty(toString)trueWeb 2.0 Program

18、ming Object-Oriented JavaScript23 / 35March 24, 2022South China University of Technology_proto_ _proto_ 鏈鏈 typeof dude.numlegsundefined Ptotype.numlegs = 2; dude.numlegs2 l這是一條生存鏈Web 2.0 Programming Object-Oriented JavaScript24 / 35March 24, 2022South China University of Technology概要概要l學習工具

19、 l對象和函數l構造函數和原型l繼承繼承l多態Web 2.0 Programming Object-Oriented JavaScript25 / 35March 24, 2022South China University of Technology怎樣實現怎樣實現? ?function NormalObject() / 父構造函數父構造函數 = normal; this.getName = function() return ; ; function PreciousObject() / 子構造函數子構造函數 this.shiny = true; th

20、is.round = true; /* 我們如何實現下面這個我們如何實現下面這個? */var crystal_ball = new PreciousObject();crystal_ = Crystal Ball.;crystal_ball.round; / truecrystal_ball.getName(); / Crystal Ball. Web 2.0 Programming Object-Oriented JavaScript26 / 35March 24, 2022South China University of Technology通過復制實現對象的繼承通過

21、復制實現對象的繼承/ 兩個對象兩個對象var shiny = shiny: true, round: true ; var normal = name: name me, getName: function() return ; ;/ 繼承功能函數繼承功能函數 function extend(parent, child) for (var i in parent) childi = parenti; / 通過復制的繼承通過復制的繼承 extend(normal, shiny);shiny.getName(); / name me”Web 2.0 Programming Obj

22、ect-Oriented JavaScript27 / 35March 24, 2022South China University of Technology原型的繼承原型的繼承function object(o) function F() F.prototype = o; return new F(); var parent = a: 1; var child = object(parent); child.a;1 child.hasOwnProperty(a);false l產生對象Web 2.0 Programming Object-Oriented JavaScript28 / 35

23、March 24, 2022South China University of Technology概要概要l學習工具 l對象和函數 l構造函數 和原型 l繼承 l多態多態 Web 2.0 Programming Object-Oriented JavaScript29 / 35March 24, 2022South China University of TechnologyJavaScript JavaScript 是面向對象的語言是面向對象的語言? ?l肯定是肯定是!l面向對象 不是不是 面向類 封裝 繼承 多態 因為JavaScript 是一種動態語言, 多態很容易實現也很常見 . 兩

24、種常見的多態:運行時替換載入時分支 l它比Java 和C+這些編譯型語言更具有動態性 Web 2.0 Programming Object-Oriented JavaScript30 / 35March 24, 2022South China University of Technology載入時分支載入時分支var getXHR = function () if (window.XMLHttpRequest) return function () / 返回一個標準的XHR實例 ; else return function () / 返回一個瀏覽器的XHR實例 ; (); / 注意: 父對象觸

25、發自我調用Web 2.0 Programming Object-Oriented JavaScript31 / 35March 24, 2022South China University of Technology運行時替換運行時替換 var documentListFactory = function () var out = ; / 只是一個簡單的數組 / 重寫默認的.push()方法 out.push = function (document) Atotype.push.call(out, document : document, timestamp : new Dat

26、e().getTime() ); ; return out;Web 2.0 Programming Object-Oriented JavaScript32 / 35March 24, 2022South China University of Technology總結總結l學習工具 Firebugl對象和函數 JavaScript != Java對象字面量, 數組字面量, JSON函數: 對象, 可調用, 返回值l構造函數和原型( Prototype)構造函數 , 構造函數屬性 內置構造函數 , 約定 原型, _proto_ 鏈l繼承通過復制, 原型的l多態載入時分支, 運行時替換Web 2.0 Programming Object-Oriented