走进面向对象的Javascript.ppt

1、OO JS 面向对象的Javascript,Take it to your program,Contents,OO的基本要素,Class,成员变量,成员函数,类变量,继承,类方法,多态,Class的定义,不同于Java, C+, JS是通过基于原型的继承实现类的功能. function Circle(r) this.r = r; 类的实例化： c = new Circle(3); (1) new 创建一个新的空对象, 并把构造函数Circle赋值给c的constructor属性; (2) new 设置对象的prototype属性. 把对象的constructor的prototype赋值给对象的

2、prototype, 实现了创建对象、继承 Prototype: Class.create();,成员变量,成员变量在初始化函数里申明： this.r = r; 注意，在对象生成后也可以定义成员变量，比如 =“my circle”，这是Java不允许的！ 但注意判断是否已存在相应的成员变量, 否则会被覆盖: if( ! ) = “my circle”; ,成员函数,标准形式： Ctotype.area = function() return 3.14 * this.r * this.r; 不能写成: Circle.area = funct

3、ion() /(不能被继承,类方法) 注:可把prototype看作基类, 它的变量或方法，是所有对象共享的. 调用 c.area() : c.area() - Ctotype.area(). prototype里的变量和方法应该是不变的. 比如：Ctotype.PI = 3.14 建议: 所有的成员函数都在紧接类定义的地方定义;,类变量,类变量是属于一个类的变量, 是一个常量. 实例不应该去修改它. 它和prototype里定义的变量的功能是相似的. 但访问方式不一样: Ctotype.PI = 3.14; /成员变量 Circle.PI

4、 = 3.14; /类变量 /用prototype里的变量 Ctotype.area1 = function() return this.PI * this.r * this.r; /用类变量 Ctotype.area2 = function() return Circle.PI * this.r * this.r; ,类方法,Circle.max = function(a, b) return a.r b.r ? a : b; theMax = Circle.max(new Circle(1), new Circle(4);,继承,function Sub

5、Circle(x, y, r) this.x = x; this.y = y; this.r =r; SubCtotype = new Circle(0); 这里prototype是一个基类. 实现: var sc = new SubCirlce(1,1,3); sc.area(); 调用过程： sc.area()-totype.area()-Circle(0).area()-Ctotype.area().,多态,多态是子类会定义和父类具有相同signature的方法. SubCtotype.PI = 100; SubCircl

6、totype.area = function() return this.PI*this.r*this.r*this.r; sc.area() ; 调用过程: sc.area()-totype.area();,Contents,Prototype Class,Class.create: Example: var Animal = Class.create( initialize: function(name) = name; , eat: function() ); var Cat = Class.create(Animal, eat:

7、 function($super, food) );,Prototype Utility Methods,$ $ $A $F $H $R Try.these,Prototype Enumerable,Array,clear clone compact each first flatten from indexOf inspect last reduce reverse size toArray toJSON uniq without,Prototype Event,element extend findElement isLeftClick obse

8、rve pointerX pointerY stop stopObserving unloadCache,Prototype Element,absolutize addClassName addMethods adjacent ancestors childElements classNames cleanWhitespace clonePosition cumulativeOffset cumulativeScrollOffset descendantOf descendants down empty extend fire firstDescendant getDimen

9、sions getElementsByClassName getElementsBySelector getHeight getOffsetParent getStyle getWidth hasClassName hide identify immediateDescendants insert inspect makeClipping makePositioned match next nextSiblings observe positionedOffset previous previousSiblings readAttribute recursivelyCollect relati

10、vize remove removeClassName replace scrollTo select setOpacity setStyle show siblings stopObserving toggle toggleClassName undoClipping undoPositioned up update viewportOffset visible wrap writeAttribute,Prototype Function,argumentNames bind bindAsEventListener curry defer delay methodize wr

11、ap,Contents,jQuery vs Prototype $,Prototype 中的 $ 是用作基于 id 的 element 选择 $(speech1).show(); jQuery 中的 $ 是用作基于 CSS 的 element 选择(等于Prototype中的 $) $(#speech1).show();,jQuery vs Prototype,Prototype - $ : 类似 Element.select(selector) $(div.tabs).invoke(hide); Or $(div.tabs).each(function(x) Element.hide(x);

12、 ) jQuery - $ : $(div.tabs).hide();,jQuery vs Prototype,Prototype Event.observe(window, load, function() ); jQuery $(document).ready(function(); Or $(function();,jQuery vs PrototypeAjax,Prototype new Ajax.Request(url, options) jQuery $.ajax(options) / url 包含在 options 中,jQuery vs PrototypeClasses,Pro

13、totype addClassName, removeClassName, toggleClassName, hasClassName jQuery addClass, removeClass, toggleClass, is(for class matching),jQuery vs PrototypeEvents,Prototype observe, stopObserving jQuery bind, unbind,jQuery vs Prototype总结,对于 Prototype 来说，是将一系列的功能封装在一个类中，如 Math 类。 而对于jQuery, 它将所有的 HTML 节

14、点都视为一个 Object，通过调用Object 上的不同方法，让 Object 自己实现不同的功能。 相比较而言，Prototype 体积小、速度比较快 但jQuery 会使得 js 代码更加的简洁，对于局域网的应用速度影响不是很明显。,jQuery 1.2,让 jQuery 和 Prototype 协同工作： 第四版系统中用 jQ 代替 jQuery 中的 $ 和 jQuery 变量： var jQ = jQuery.noConflict();,jQuery 1.2 Effects,利用 Effects 的函数制作动画效果 1.show(speed,callback )：动态地显示对应的e

15、lements, 并在动态显示结束后调用 callback 方法 Example: jQ(button).click(function () jQ(p).show(slow); ); 类似的：hide(speed,callback ) , Sliding, Fading,jQuery 1.2 Effects,2.animate(params,duration,easing,callback ) :用于制作用户自定义动画效果. Arguments: params: 执行动画的最终效果 duration: 动画持续时间 easing: The name of the easing effect t

16、hat you want to use (Plugin Required). There are two built-in values, linear and swing. callback: 回调函数,Contents,Others,1.Array.shift: 删除数组中的第一个元素并返回这个元素.这个方法改变了数组的长度. 也可以用Prototype中的without().例如： 3, 5, 6, 1, 3, 20.without(3) / - 5, 6, 1, 20 2. (function() . )(); 3.Options = Options | ; Example: func

17、tion test() var test_value = arguments0 | 30; ,Others,4. apply和call方法的使用： apply:应用某一对象的一个方法，用另一个对象替换当前对象。 var result = fun.apply(thisArg, argArray); 其中, thisArg 被定义为 fun中 this 的值, argArray 被定义为一个参数组（以数组形式存在）. call:应用某一对象的一个方法，用另一个对象替换当前对象。 var result = fun.call(thisArg, arg1, arg2, .); 其中, thisArg 被

18、定义为 fun中 this 的值, arg1,arg2,是方法参数. Example:,function product(name, value) = name;if (value 1000)this.value = 999;elsethis.value = value; function prod_dept(name, value, dept)this.dept = dept;product.apply(this, arguments);/or product.call(this,arguments0,arguments1); prod_totype = new product(); / since 5 is less than 1000 value is setvar cheese = new prod_dept(feta, 5, food);/ sin