Javascript面向对象研究心得
生活随笔
收集整理的這篇文章主要介紹了
Javascript面向对象研究心得
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這段時間正好公司項目須要,須要改動fullcalendar日歷插件,有機會深入插件源代碼。正好利用這個機會,我也大致學習了下面JS的面向對象編程,感覺收獲還是比較多的。
所以寫了以下這篇文章希望跟大家探討探討JS的面向對象,本人資歷尚淺,還望各位大神多多不吝賜教。
總述:
Jquery的一些東西: 1.each方法: ? ? 這是在js面向對象編程中十分經常使用的一種方式,each方法使dom結構循環變得簡潔,它能夠遍歷數組,對象,json等
$(selector).each(function(index,element)) 或 $.each(selector,function(index,element)) 調用樣例: var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); //輸出: 0,1,2alert(val); //輸出:aaa,bbb,ccc}); 參數selector能夠是dom元素($("input:hidden")),json({?one:1,?two:2,?three:3})等等 當參數是json格式時,傳入函數的index就變為了json元素的key
看下jQuery中的each實現(網絡摘抄)? function (object, callback, args) { //該方法有三個參數:進行操作的對象obj,進行操作的函數fn,函數的參數argsvar name, i = 0,length = object.length;if (args) {if (length == undefined) {for (name in object) {if (callback.apply(object[name], args) === false) {break;}}} else {for (; i < length;) {if (callback.apply(object[i++], args) === false) {break;}}}} else {if (length == undefined) {for (name in object) {if (callback.call(object[name], name, object[name]) === false) {break;}}} else {for (var value = object[0]; i < length && !== false; value = object[++i]) {}/*object[0]取得jQuery對象中的第一個DOM元素,通過for循環,得到遍歷整個jQuery對象中相應的每一個DOM元素,通過 callback.call( value,i,value);將callback的this對象指向value對象,而且傳遞兩個參數,i表示索引值,value表示DOM元素;當中callback是相似于 function(index, elem) { ... } 的方法。所以就得到 $("...").each(function(index, elem){ ... });*/}}return object;}來源: <a target=_blank href="http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html">http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html</a> 上述中,回調函數callback作為參數傳入,callback.call(value,?i,?value)這部分實際上限制了callback傳入時僅僅會使用i,value兩個參數。 在把callback作為參數的函數中,會定義callback實際的參數列表,外部定義callback時,需遵循此參數列表,最經常使用的樣例就是jqueryAJAX中,調用成功返回的success函數或error函數。
? JS高級特性: 1. ? ??===運算符 ? ?? ? ? || ,&& 運算符????
? 2.函數作為值進行參數傳遞 jquery的AJAX是函數作為值傳遞的好樣例 js中的函數傳遞都是按值進行傳遞的,函數名就是對象的引用,它使得函數能夠向不論什么對象一樣作為參數進行傳遞,由于這一特性JS有了更大的靈活性。 我們能夠定義帶有函數參數的函數,限定傳入函數的參數,而不限定對于參數的實現(callback的原理) 下圖為研究fullcalendar插件時的,插件定義了對日歷元素的遍歷函數,對每一個元素的操作則作為callback函數傳入,這樣我們能夠對不同元素操做的遍歷進行復用 function segmentElementEach(segments, callback) { // TODO: use in AgendaView?for (var i=0; i<segments.length; i++) {var segment = segments[i];var element = segment.element;if (element) {callback(segment, element, i);}} }
注意以下這樣的時尚大氣的使用方法,有點像接口,但更開放 // report the elements to the View, for general drag/resize utilitiessegmentElementEach(segments, function(segment, element) {reportEventElement(segment.event, element);});// attach mouse handlers//attachHandlers(segments, modifiedEventId);// call `eventAfterRender` callback for each eventsegmentElementEach(segments, function(segment, element) {trigger('eventAfterRender', segment.event, segment.event, element);}); 4.JS boolean ? ? 在JS編程中,尤其是面向對象編程,常常會向一些推斷語句傳入一些對象,如(fullcalendar插件中截取):
// the container where the initial HTML will be rendered.// If `doAppend`==true, uses a temporary container.var renderContainer = doAppend ? $("<div/>") : finalContainer; 在JS中,推斷語句會將傳入值轉換成Boolean后推斷 轉換規則:
| 數據類型 | 轉為true的值 | 轉為false的值 |
| Boolean | true | false |
| String | 不論什么非空字符串 | “”空字符串 |
| Number | 不論什么非零數值 | 0和NaN |
| Object | 不論什么對象 | null |
| Undefined | n/a | undefined |
JS面向對象:
1.argument對象? 在JavaScript的每個函數里存在一個上下文相關的名為arguments的變量,它的行為類似于一個偽數組,包括了傳給函數的所有參數,這個對象存在于每個函數的上下文中。 ??argument[0]表示函數調用時傳入的第一個參數,argument[1]表示第二個參數,由此類推 ? ?若改動argument的值,則相應的出入參數也跟著改動。
argument對象在JS模擬函數重載時有非常大的用處
2.this 在不論什么語言中,包含操作系統,上下文這個概念總是不可獲取,我們能夠把上下文理解成當前程序運行的環境。 在JS中,這個上下文通過this來實現,this總是指向當前工作的上下文對象。在全局環境中,this指向window對象。 在函數調用時,能夠通過call和apply方法來改變函數運行的上下文對象,this就會指向新的對象。這在興許的繼承中也會提及。
關于this的訪問: 在這個樣例中,在getNameFunc函數內部取到的this不是object對象的this,而是window全局對象,由于object.getNameFunc()實際返回函數名getNameFunc,這時,調用函數的環境變為了全局環境,this因此變成了window。 JS中,每一個函數調用時都會自己主動取得this和arguments兩個特殊變量。
3.函數重載 JS與java,c#的面向對象語言不同,函數沒有重載的概念,相同的函數名后面的會覆蓋前面的(JS函數名就是個引用)。 而JS的重載則能夠通過argument對象來實現,例如以下是從《Javascript 面向對象編程》一書中截取。 能夠通過argument的length屬性推斷函數調用時的參數列表,結合typeof類型推斷,能夠實現函數的重載 //一個簡單的用來發送消息的函數 function sendMessage( msg, obj ) { //假設同一時候提供了一個消息和一個對象 if ( arguments.length == 2 ) //就將消息發給該對象 obj.handleMsg( msg );else //否則,剛假定僅僅有消息被提供//于是顯示該消息 alert( msg ); }
4.JS作用域 JS作用域以函數為界限,而沒有塊約束(for,if,while等),所以在for中定義的var變量實際上在for循環外部依舊起作用。 注意:在函數內部未使用varkeyword產生的變量,可在全局訪問
5.閉包 簡單的說,閉包就是內層函數引用外層變量的手段,而外層則無法訪問內層的變量,是否閉包是對外層變量的封裝,函數是否作為隔離之用?(在函數的生命周期內,外層無法影響變量) 結合《Javascript 面向對象編程》和 網上找的各種資料,我總結了閉包的下面幾種使用方法。
(1)簡單的封裝函數,把實現業務的代碼和參數分開,避免混亂的代碼調用方式。 ??? 下面為演示樣例代碼(取自:《Javascript 面向對象編程》) //用來延遲顯示消息的通用函數 function delayedAlert( msg, time ) { //初始化一個被封套的函數 setTimeout(function(){ //此函數使用了來自封套它的函數的變量msg alert( msg ); }, time ); }其實本人感覺,這好像并沒體現出閉包的什么特點,倒反而像是簡單的封裝
(2)匿名自運行函數 ? ? 在JS編寫過程中,經常會在全局存放非常多變量,包含非常多暫時變量,這經常會對其它的函數造成影響,使用閉包能夠解決這一問題。
? ? 下面樣例來自?http://blog.csdn.net/sunlylorn/article/details/6534610
(3)設計模式中的單例模式 在single以外是無法訪問unique的,而且採用匿名函數,僅僅能初始化一次
(5)靜態方法 靜態方法類似于java等語言,能夠直接通過累訪問。 JS中的靜態方法,實際能夠看做函數對象的屬性,而不是通過函數對象創建出的對象的屬性。所以無法通過事實上例訪問函數對象。
5.構造(重要) 在JS中,創建對象有多種方式,相比java等語言比較靈活。 JS中,能夠先創建Object的實例,再為其加入屬性和方法(不展演示樣例子,比較簡單),或通過字面量的方式(大括號包裹屬性和方法)。 可是,用上述的基本方式創建對象會產生大量反復代碼。下面幾種方式是比較推薦的方式。 (1)工廠模式 作為最經常使用的設計模式之中的一個,在JS中相同能夠模擬這樣的方式。工廠模式用函數封裝創建對象的細節,僅僅須要通過接口來創建對象。
(4)靜態方法創建 靜態方法類似于java等語言,能夠直接通過累訪問。 JS中的靜態方法,實際能夠看做函數對象的屬性,而不是通過函數對象創建出的對象的屬性。所以無法通過事實上例訪問函數對象。
6.繼承(重要) 這里,我僅僅介紹最主要的幾種集成方式,一些基于設計模式的擴展,這里就不做贅述了。 (1)原型鏈法 ? ? 通過子類的原型對象引用父類的實例對象,該實例對象將引用父類原型對象,從而實現了原型鏈。
原型鏈的最上一級一定是Object對象。
原型鏈搜索機制:讀取時,從實例對象開始,順著原型鏈一直向上搜索,若找不到屬性或方法,則會在最后一步停止。
(2)借用構造函數 這是我所見過的最經常使用的方式,其思想是在子類中調用超類的構造函數,主要通過借助apply和call方法,即用子類的this環境去調用超類的構造函數,實現將超類的屬性,方法拷貝到子類的過程。這在fullcalendar插件中大量使用。
轉載于:https://www.cnblogs.com/mengfanrong/p/3868798.html
總結
以上是生活随笔為你收集整理的Javascript面向对象研究心得的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第一次作业(李奇峰 2017310624
- 下一篇: 分块入门(根据hzwer的博客。。)(右