Lecture 8 Object-OrientedJavaScript

1、Web ProgrammingSchool of Computer Science and Engineering,South China University of TechnologyLecture 8 面向对象的面向对象的JavaScriptWeb 2.0 Programming Object-Oriented JavaScript2 / 35July 1, 2022South China University of Technology概要概要l学习工具学习工具 l对象和函数 l构造函数和原型 l基础l多态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: 命令会在所打开的页面中执行 https:/ Web 2.0 Programming Object-Oriented JavaScript5 / 35Ju

3、ly 1, 2022South China University of Technology概要概要l学习工具 l对象和函数对象和函数 l构造函数和原型 l继承 l多态 Web 2.0 Programming Object-Oriented JavaScript6 / 35July 1, 2022South China University of TechnologyJavaScript != Javal类似C语言的语法l类（Classes） l数据类型:原始的:数字类型 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每一个对象实际上都是一个内部哈希表 (键: 值)l当一个属性是函数时我们称之为方法 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数组数组l数组也是对象 l自动增加属性l一些有用的方法 l数组字面量 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对象字面量+ 数组字面量l对象序列化 , 在保存跟传送对象 时很有用l一个 JSON 字符串可以通过eval() 函数实例化 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函数函数l函数是对象 拥有属性 拥有方法 可以被复制，删除，扩充.特征 : 可调用（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函数是对象函数是对象 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所有的函数总是返回一个值 l如果函数没有显式返回一个值, 它返回的是未定义值未定义值(undefined) l函数可以返回对象,包括其它函数 Web 2.0 Programming Object-Oriented JavaScript14 / 35July 1, 2022South China University of Technology概要概要l学习工具 l对象和函数l构造函数和原型构造函数和原型l继承l多态Web 2.0 Programming Object-Orient

10、ed JavaScript15 / 35July 1, 2022South China University of Technology构造函数构造函数l当使用 new创建时, 函数将返回一个this对象 l在它返回之前，你可以修改 this 对象 l命名约定 : 构造函数： MyConstructor ； 函数：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构造函数属性构造函数属性 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内置构造函数内置构造函数 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 是函数对

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当一个函数被调用时， prototype 作为构造函数被使用 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对象有一个隐式链接，链接到创建它们的对象的构造函数的 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对象和函数l构造函数和原型l继承继承l多态Web 2.0 Programming Obj

19、ect-Oriented JavaScript25 / 35July 1, 2022South China University of Technology怎样实现怎样实现? ?function NormalObject() / 父构造函数父构造函数 = normal; this.getName = function() return ; ; function PreciousObject() / 子构造函数子构造函数 this.shiny = true; this.round = true; /* 我们如何实现下面这个我们如何实现下面这个? */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通过复制实现对象的继承通过复制实现对象的继承/ 两个对象两个对象var shiny = shiny: true, round:

21、 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 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产生对象Web 2.0 Programming Object-Oriented JavaScript28 / 35July 1, 2022South China University of Technology概要概要

23、l学习工具 l对象和函数 l构造函数 和原型 l继承 l多态多态 Web 2.0 Programming Object-Oriented JavaScript29 / 35July 1, 2022South China University of TechnologyJavaScript JavaScript 是面向对象的语言是面向对象的语言? ?l肯定是肯定是!l面向对象 不是不是 面向类 封装 继承 多态 因为JavaScript 是一种动态语言, 多态很容易实现也很常见 . 两种常见的多态:运行时替换载入时分支 l它比Java 和C+这些编译型语言更具有动态性 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实例 ; (); / 注意: 父对象触发自我调用Web 2.0 Programming Object-Oriented JavaScript31 / 35

25、July 1, 2022South China University of Technology运行时替换运行时替换 var documentListFactory = function () var out = ; / 只是一个简单的数组 / 重写默认的.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总结总结l学习工具 Firebugl对象和函数 JavaScript != Java对象字面量, 数组字面量, JSON函数: 对象, 可调用, 返回值l构造函数和原型( Prototype)构造函数 , 构造函数属性 内置构造函数 , 约定 原型, _proto_ 链l继承通过复制, 原型的l多态载入时分支, 运行时替换Web 2.0 Programming Object-Oriented J