上學時C#老師講到對象有兩類方法,靜態方法(Static)和實例方法(非Static),當時不理解靜態是為何意,只是強記。
後來從事了前端的工作,一直在對類(即對象,Js中嚴格來說沒有類的定義,雖眾所周知,這裡還是贅述一番,以免產生歧義)的操作上,嚴重缺乏整體概念,最近看extetnd中再次提到拓展靜態方法與實例方法,故而再次百度,才幡然領悟,其實一直有用,只是不知其專業術語呀,哈哈~
靜態方法,屬於類的方法,即類可以直接調用的方法。為類所有實例化對象所共用(但不能用實例對象之間調用),所以靜態成員只在內存中占一塊區域;
實例方法,屬於實例化類後對象的方法,即實例對象調用的方法。每創建一個類的實例,都會在內存中為非靜態成員分配一塊存儲;
靜態方法在一啟動時就實例化了,因而靜態內存是連續的,且靜態內存是有限制的;而非靜態方法是在程序運行中生成內存的,申請的是離散的空間。
看代碼:
function A(){ } A.staticMethof = function(){ alert('靜態方法'); } A.prototype.instaceMethod = function(){ alert('實例方法'); } A.staticMethof(); //類A直接調用 var instace = new A(); instace.instaceMethod();//A的實例對象instace調用
拿jQuery框架來看,它的方法都是實例方法,它的工具函數都是靜態方法。靜態方法$.each(); 實例方法$('body').each();
說到這裡就很好理解了。
下面來看下jQuery中拓展兩種方法extend的用法。
其實當年看到各種框架和別人代碼用到$.extend 和 $.fn.extend我是相當不開心的,哈哈,因為不懂... 現在講了靜態方法與實例方法,聰明的朋友應該可以猜到了,$.extend是拓展靜態方法,而$.fn.extend是拓展實例方法,哈哈,聰明~
先說下extend。
extend,這個函數的功能基本都是實現對象的拷貝功能,即將一個對象的所有屬屬性拷貝到另外一個對象上去,開發插件時經常用到。
看代碼:
jQuery.extend(object)
為jQuery類添加方法,即添加靜態方法:
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(,); // jQuery.max(,); // Objectj Query.extend( target, object, [objectN]);
為其他類添加靜態方法(用一個或多個對象來拓展一個對象,返回被拓展的對象
var settings = { validate: false, limit: , name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);
結果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…. //…… };
原來jQuery.fn = jQuery.prototype,對prototype原型鏈是不陌生的吧?
jQuery.fn.extend( object );
對jQuery.prototype進行拓展,即添加實例函數。
例如要開發一個插件,編輯框被點擊時,alert編輯框中的內容。
$.fn.extend({ alertWhileClick: function(){ $(this).click(function(){ alert($(this).val()); }) }; }); $("#input").alertWhileClick();
你可以拓展一個對象到jQuery的prototype中去,這樣的話就是插件機制了。
<span style="font-size: px;">(function( $ ){ $.fn.tooltip = function( options ) { }; //等價於 var tooltip = { function(options){ } }; $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip })( jQuery ); </span>
以上所述是小編給大家介紹的Js類的靜態方法與實例方法區分及jQuery拓展的兩種方法 ,希望對大家有所幫助!