Js類的靜態方法與執行個體方法區分及jQuery拓展的兩種方法，jsjquery

Js類的靜態方法與執行個體方法區分及jQuery拓展的兩種方法，jsjquery

上學時C#老師講到對象有兩類方法，靜態方法(Static)和執行個體方法(非Static)，當時不理解靜態是為何意，只是強記。

後來從事了前端的工作，一直在對類(即對象，Js中嚴格來說沒有類的定義，雖眾所周知，這裡還是贅述一番，以免產生歧義)的操作上，嚴重缺乏整體概念，最近看extetnd中再次提到拓展靜態方法與執行個體方法，故而再次百度，才幡然領悟，其實一直有用，只是不知其專業術語呀，哈哈~

靜態方法，屬於類的方法，即類可以直接調用的方法。為類所有執行個體化對象所共用（但不能用執行個體對象之間調用），所以靜態成員只在記憶體中佔一塊地區；

執行個體方法，屬於執行個體化類後對象的方法，即執行個體對象調用的方法。每建立一個類的執行個體，都會在記憶體中為非靜態成員分配一Block Storage；

靜態方法在一啟動時就執行個體化了，因而靜態記憶體是連續的，且靜態記憶體是有限制的；而非靜態方法是在程式運行中產生記憶體的，申請的是離散的空間。

看代碼：

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.fnjQuery.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拓展的兩種方法 ，希望對大家有所協助！