走進面向對象的Javascript.ppt

1、OO JS 面向對象的Javascript,Take it to your program,Contents,OO的基本要素,Class,成員變量,成員函數(shù),類變量,繼承,類方法,多態(tài),Class的定義,不同于Java, C+, JS是通過基于原型的繼承實現(xiàn)類的功能. function Circle(r) this.r = r; 類的實例化： c = new Circle(3); (1) new 創(chuàng)建一個新的空對象, 并把構造函數(shù)Circle賦值給c的constructor屬性; (2) new 設置對象的prototype屬性. 把對象的constructor的prototype賦值給對象的

2、prototype, 實現(xiàn)了創(chuàng)建對象、繼承 Prototype: Class.create();,成員變量,成員變量在初始化函數(shù)里申明： this.r = r; 注意，在對象生成后也可以定義成員變量，比如 =“my circle”，這是Java不允許的！ 但注意判斷是否已存在相應的成員變量, 否則會被覆蓋: if( ! ) = “my circle”; ,成員函數(shù),標準形式： 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 建議: 所有的成員函數(shù)都在緊接類定義的地方定義;,類變量,類變量是屬于一個類的變量, 是一個常量. 實例不應該去修改它. 它和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是一個基類. 實現(xiàn): var sc = new SubCirlce(1,1,3); sc.area(); 調用過程： sc.area()-totype.area()-Circle(0).area()-Ctotype.area().,多態(tài),多態(tài)是子類會定義和父類具有相同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 節(jié)

14、點都視為一個 Object，通過調用Object 上的不同方法，讓 Object 自己實現(xiàn)不同的功能。 相比較而言，Prototype 體積小、速度比較快 但jQuery 會使得 js 代碼更加的簡潔，對于局域網(wǎng)的應用速度影響不是很明顯。,jQuery 1.2,讓 jQuery 和 Prototype 協(xié)同工作： 第四版系統(tǒng)中用 jQ 代替 jQuery 中的 $ 和 jQuery 變量： var jQ = jQuery.noConflict();,jQuery 1.2 Effects,利用 Effects 的函數(shù)制作動畫效果 1.show(speed,callback )：動態(tài)地顯示對應的e

15、lements, 并在動態(tài)顯示結束后調用 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: 執(zhí)行動畫的最終效果 duration: 動畫持續(xù)時間 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: 回調函數(shù),Contents,Others,1.Array.shift: 刪除數(shù)組中的第一個元素并返回這個元素.這個方法改變了數(shù)組的長度. 也可以用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 被定義為一個參數(shù)組（以數(shù)組形式存在）. call:應用某一對象的一個方法，用另一個對象替換當前對象。 var result = fun.call(thisArg, arg1, arg2, .); 其中, thisArg 被

18、定義為 fun中 this 的值, arg1,arg2,是方法參數(shù). 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