Js类的静态方法与实例方法区分及jQuery拓展的两种方法


Posted in Javascript onJune 03, 2016

上学时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拓展的两种方法 ,希望对大家有所帮助!

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
Vue实现星级评价效果实例详解
Dec 30 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 #Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 #Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 #Javascript
Jquery中map函数的用法
Jun 03 #Javascript
JavaScript进阶练习及简单实例分析
Jun 03 #Javascript
jQuery EasyUI 入门必看
Jun 03 #Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 #Javascript
You might like
php文件上传的例子及参数详解
2013/12/12 PHP
php密码生成类实例
2014/09/24 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Yahoo的PHP面试题
2014/05/26 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
自主招生自荐信指南
2014/02/04 职场文书
早会主持词
2014/03/17 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
内科护士节演讲稿
2014/09/11 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python