Js类的静态方法与实例方法区分及jQuery拓展的两种方法
上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记。
后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~
静态方法,属于类的方法,即类可以直接调用的方法。为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态成员只在内存中占一块区域;
实例方法,属于实例化类后对象的方法,即实例对象调用的方法。每创建一个类的实例,都会在内存中为非静态成员分配一块存储;
静态方法在一启动时就实例化了,因而静态内存是连续的,且静态内存是有限制的;而非静态方法是在程序运行中生成内存的,申请的是离散的空间。
看代码:
functionA(){ } A.staticMethof=function(){ alert('静态方法'); } A.prototype.instaceMethod=function(){ alert('实例方法'); } A.staticMethof();//类A直接调用 varinstace=newA(); 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){returna<b?a:b;}, max:function(a,b){returna>b?a:b;} }); jQuery.min(,);// jQuery.max(,);// ObjectjQuery.extend(target,object,[objectN]);
为其他类添加静态方法(用一个或多个对象来拓展一个对象,返回被拓展的对象
varsettings={validate:false,limit:,name:"foo"}; varoptions={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中去,这样的话就是插件机制了。
<spanstyle="font-size:px;">(function($){ $.fn.tooltip=function(options){ }; //等价于 vartooltip={ function(options){ } }; $.fn.extend(tooltip)=$.prototype.extend(tooltip)=$.fn.tooltip })(jQuery); </span>
以上所述是小编给大家介绍的Js类的静态方法与实例方法区分及jQuery拓展的两种方法,希望对大家有所帮助!