Lecture 8 Object-OrientedJavaScript

1、Web ProgrammingSchool of Computer Science and Engineering,South China University of TechnologyLecture 8 面向?qū)ο蟮拿嫦驅(qū)ο蟮腏avaScriptWeb 2.0 Programming Object-Oriented JavaScript2 / 35July 1, 2022South China University of Technology概要概要l學習工具學習工具 l對象和函數(shù) l構(gòu)造函數(shù)和原型 l基礎l多態(tài)Web 2.0 Programming Object-Oriented Java

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

3、ly 1, 2022South China University of Technology概要概要l學習工具 l對象和函數(shù)對象和函數(shù) l構(gòu)造函數(shù)和原型 l繼承 l多態(tài) Web 2.0 Programming Object-Oriented JavaScript6 / 35July 1, 2022South China University of TechnologyJavaScript != Javal類似C語言的語法l類（Classes） l數(shù)據(jù)類型:原始的:數(shù)字類型 1, 3, 1001, 11.12, 2e+3字符串 a, stoyan, 0布爾類型 true | false空（nul

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

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

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

7、 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 / 35July 1, 2022South China University of Technology函數(shù)函數(shù)l函數(shù)是對象 擁有屬性 擁有方法 可以被復制，刪除，擴充.特征 : 可調(diào)用（invokable）function say(what) return what;var say = function(what) ret

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

9、 35July 1, 2022South China University of Technology返回值返回值l所有的函數(shù)總是返回一個值 l如果函數(shù)沒有顯式返回一個值, 它返回的是未定義值未定義值(undefined) l函數(shù)可以返回對象,包括其它函數(shù) Web 2.0 Programming Object-Oriented JavaScript14 / 35July 1, 2022South China University of Technology概要概要l學習工具 l對象和函數(shù)l構(gòu)造函數(shù)和原型構(gòu)造函數(shù)和原型l繼承l(wèi)多態(tài)Web 2.0 Programming Object-Orient

10、ed JavaScript15 / 35July 1, 2022South China University of Technology構(gòu)造函數(shù)構(gòu)造函數(shù)l當使用 new創(chuàng)建時, 函數(shù)將返回一個this對象 l在它返回之前，你可以修改 this 對象 l命名約定 : 構(gòu)造函數(shù)： MyConstructor ； 函數(shù)：myFunction .var Person = function(name) = name; this.getName = function() return ; ;var me = new Person(Stoyan);me.getName(

11、); / StoyanWeb 2.0 Programming Object-Oriented JavaScript16 / 35July 1, 2022South China University of Technology構(gòu)造函數(shù)屬性構(gòu)造函數(shù)屬性 function Person(); var jo = new Person(); jo.constructor = Persontrue var o = ; o.constructor = Objecttrue 1,2.constructor = ArraytrueWeb 2.0 Programming Object-Oriented JavaS

12、cript17 / 35July 1, 2022South China University of Technology內(nèi)置構(gòu)造函數(shù)內(nèi)置構(gòu)造函數(shù) lObjectlArraylFunctionlRegExplNumberlStringlBooleanlDatelError, SyntaxError, ReferenceError Web 2.0 Programming Object-Oriented JavaScript18 / 35July 1, 2022South China University of Technology約定約定使用這個方法使用這個方法而不是這種方法而不是這種方法var

13、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 / 35July 1, 2022South China University of Technology原型原型lprototype 是函數(shù)對

14、象的一個特殊屬性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 / 35July 1, 2022South China University of Technolo

15、gyprototypeprototype屬性的使用屬性的使用l當一個函數(shù)被調(diào)用時， prototype 作為構(gòu)造函數(shù)被使用 var Person = function(name) = name;Ptotype.say = function() return ; var dude = new Person(dude); ;dude dude.say();dudesay() 是 prototype對象的一個屬性，但它卻像dude對象的屬性一樣被使用 Web 2.0 Programming Object-Oriented Ja

16、vaScript21 / 35July 1, 2022South China University of TechnologylisPrototypeOf()自帶屬性自帶屬性 vs. prototype vs. prototype包含的屬性包含的屬性 dude.hasOwnProperty(name);true dude.hasOwnProperty(say);false Ptotype.isPrototypeOf(dude);true Ototype.isPrototypeOf(dude);trueWeb 2.0 Programming Object-Or

17、iented JavaScript22 / 35July 1, 2022South China University of Technologyl對象有一個隱式鏈接，鏈接到創(chuàng)建它們的對象的構(gòu)造函數(shù)的 prototype _proto_proto_ dude._proto_.hasOwnProperty(say)true totype? / Trick question dude._proto_._proto_.hasOwnProperty(toString)trueWeb 2.0 Programming Object-Oriented JavaScript23 / 35July

18、 1, 2022South China University of Technology_proto_ _proto_ 鏈鏈 typeof dude.numlegsundefined Ptotype.numlegs = 2; dude.numlegs2 l這是一條生存鏈Web 2.0 Programming Object-Oriented JavaScript24 / 35July 1, 2022South China University of Technology概要概要l學習工具 l對象和函數(shù)l構(gòu)造函數(shù)和原型l繼承繼承l(wèi)多態(tài)Web 2.0 Programming Obj

19、ect-Oriented JavaScript25 / 35July 1, 2022South China University of Technology怎樣實現(xiàn)怎樣實現(xiàn)? ?function NormalObject() / 父構(gòu)造函數(shù)父構(gòu)造函數(shù) = normal; this.getName = function() return ; ; function PreciousObject() / 子構(gòu)造函數(shù)子構(gòu)造函數(shù) this.shiny = true; this.round = true; /* 我們?nèi)绾螌崿F(xiàn)下面這個我們?nèi)绾螌崿F(xiàn)下面這個? */var

20、crystal_ball = new PreciousObject();crystal_ = Crystal Ball.;crystal_ball.round; / truecrystal_ball.getName(); / Crystal Ball. Web 2.0 Programming Object-Oriented JavaScript26 / 35July 1, 2022South China University of Technology通過復制實現(xiàn)對象的繼承通過復制實現(xiàn)對象的繼承/ 兩個對象兩個對象var shiny = shiny: true, round:

21、 true ; var normal = name: name me, getName: function() return ; ;/ 繼承功能函數(shù)繼承功能函數(shù) function extend(parent, child) for (var i in parent) childi = parenti; / 通過復制的繼承通過復制的繼承 extend(normal, shiny);shiny.getName(); / name me”Web 2.0 Programming Object-Oriented JavaScript27 / 35July 1, 2022South Ch

22、ina 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產(chǎn)生對象Web 2.0 Programming Object-Oriented JavaScript28 / 35July 1, 2022South China University of Technology概要概要

23、l學習工具 l對象和函數(shù) l構(gòu)造函數(shù) 和原型 l繼承 l多態(tài)多態(tài) Web 2.0 Programming Object-Oriented JavaScript29 / 35July 1, 2022South China University of TechnologyJavaScript JavaScript 是面向?qū)ο蟮恼Z言是面向?qū)ο蟮恼Z言? ?l肯定是肯定是!l面向?qū)ο?不是不是 面向類 封裝 繼承 多態(tài) 因為JavaScript 是一種動態(tài)語言, 多態(tài)很容易實現(xiàn)也很常見 . 兩種常見的多態(tài):運行時替換載入時分支 l它比Java 和C+這些編譯型語言更具有動態(tài)性 Web 2.0 Progr

24、amming Object-Oriented JavaScript30 / 35July 1, 2022South China University of Technology載入時分支載入時分支var getXHR = function () if (window.XMLHttpRequest) return function () / 返回一個標準的XHR實例 ; else return function () / 返回一個瀏覽器的XHR實例 ; (); / 注意: 父對象觸發(fā)自我調(diào)用Web 2.0 Programming Object-Oriented JavaScript31 / 35

25、July 1, 2022South China University of Technology運行時替換運行時替換 var documentListFactory = function () var out = ; / 只是一個簡單的數(shù)組 / 重寫默認的.push()方法 out.push = function (document) Atotype.push.call(out, document : document, timestamp : new Date().getTime() ); ; return out;Web 2.0 Programming Object-Oriented JavaScript32 / 35July 1, 2022South China University of Technology總結(jié)總結(jié)l學習工具 Firebugl對象和函數(shù) JavaScript != Java對象字面量, 數(shù)組字面量, JSON函數(shù): 對象, 可調(diào)用, 返回值l構(gòu)造函數(shù)和原型( Prototype)構(gòu)造函數(shù) , 構(gòu)造函數(shù)屬性 內(nèi)置構(gòu)造函數(shù) , 約定 原型, _proto_ 鏈l繼承通過復制, 原型的l多態(tài)載入時分支, 運行時替換Web 2.0 Programming Object-Oriented J