【转载】Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

上学时C#老师讲到对象有两类方法，静态方法(Static)和实例方法(非Static)，当时不理解静态是为何意，只是强记。

后来从事了前端的工作，一直在对类(即对象，Js中严格来说没有类的定义，虽众所周知，这里还是赘述一番，以免产生歧义)的操作上，严重缺乏整体概念，最近看extetnd中再次提到拓展静态方法与实例方法，故而再次百度，才幡然领悟，其实一直有用，只是不知其专业术语呀，哈哈~

 

静态方法，属于类的方法，即类可以直接调用的方法。为类所有实例化对象所共用（但不能用实例对象之间调用），所以静态成员只在内存中占一块区域；

实例方法，属于实例化类后对象的方法，即实例对象调用的方法。每创建一个类的实例，都会在内存中为非静态成员分配一块存储；

 

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

看代码：

1 2 3 4 5 6 7 8 9 10 11 12

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类添加方法，即添加静态方法：

1 2 3 4 5 6

jQuery.extend({ 　　min: function(a, b) { return a < b ? a : b; }, 　　max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); //  2 jQuery.max(4,5); //  5

　　

Objectj Query.extend( target, object1, [objectN]);

为其他类添加静态方法(用一个或多个对象来拓展一个对象，返回被拓展的对象

1 2 3 4

var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果：settings == { validate: true, limit: 5, name: "bar" }

　　

jQuery.fn

1 2 3 4

jQuery.fn = jQuery.prototype = { 　　　init: function( selector, context ) {//…. //…… };

原来jQuery.fn = jQuery.prototype，对prototype原型链是不陌生的吧?

 

jQuery.fn.extend( object );

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

例如要开发一个插件，编辑框被点击时，alert编辑框中的内容。

1 2 3 4 5 6 7 8

$.fn.extend({     alertWhileClick: function(){         $(this).click(function(){             alert($(this).val());         })     }; }); $("#input1").alertWhileClick();

你可以拓展一个对象到jQuery的prototype中去，这样的话就是插件机制了。

1 2 3 4 5 6 7 8 9 10

(function( $ ){     $.fn.tooltip = function( options ) {     };     //等价于     var tooltip = {         function(options){         }     };     $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip })( jQuery );

 

转载原文地址：https://www.cnblogs.com/tracyzeng/p/5553715.html