JavaScript静态方法与实例方法详解及jQuery扩展机制解析

静态方法与实例方法的核心区别

在学习C#课程时，老师曾介绍对象包含两种方法：静态方法（Static）与实例方法（非Static）。当时对静态方法的概念尚不清晰，仅靠记忆强行掌握。

从事前端开发后，在处理对象（JavaScript中严格意义上并无类的定义，此处为便于理解暂沿用此概念）的操作时，往往缺乏整体视角。近期在研究extetnd相关机制时再次接触到静态与实例方法的拓展，通过查阅资料后恍然大悟，原来这些功能早已在使用中，只是此前未掌握其专业术语。

静态方法归属于类本身，即可以直接通过类名调用。这类方法由该类的所有实例化对象共享（但不能通过实例对象直接调用），因此静态成员在内存中仅占用一块区域。

实例方法则归属于类的具体实例，即通过实例对象调用的方法。每创建一个类的实例，系统都会为非静态成员在内存中分配独立的存储空间。

静态方法在程序启动时即完成实例化，因此静态内存是连续的，且受到一定限制；而非静态方法的内存是在程序运行过程中动态生成的，申请的是离散的空间。

参考以下代码示例：

function A(){
}
A.staticMethof = function(){
alert('静态方法');
}
A.prototype.instaceMethod = function(){
alert('实例方法');
}
A.staticMethof(); //类A直接调用
var instace = new A();
instace.instaceMethod();//A的实例对象instace调用 

jQuery中的静态与实例方法示例

以jQuery框架为例，其大部分方法属于实例方法，而工具函数则属于静态方法。例如，静态方法表现为$.each()，而实例方法表现为$('body').each()。

理解上述概念后，相关机制便易于掌握。

接下来介绍jQuery中两种扩展方法extend的具体用法。

过去看到各类框架及他人代码中使用的$.extend和$.fn.extend时曾感到困惑，如今明确了静态与实例方法的区别，不难推断：$.extend用于拓展静态方法，而$.fn.extend用于拓展实例方法。

jQuery.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，对于原型链的概念应当不陌生。

$.fn.extend实例插件开发

jQuery.fn.extend( object );

该用法用于对jQuery.prototype进行拓展，即添加实例函数。

例如，若要开发一个插件，实现点击编辑框时弹出提示框显示编辑框内容的需求。

$.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> 

以上介绍了JavaScript中静态方法与实例方法的区分，以及jQuery扩展的两种主要方法，希望读者能从中受益。