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 相关文章推荐
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
vue实现循环滚动列表
Jun 30 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php自动载入类用法实例分析
2016/06/24 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
vue 项目接口管理的实现
2019/01/17 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python变量作用范围实例分析
2015/07/07 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
详解Python中的路径问题
2020/09/02 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
关于Java finally的面试题
2016/04/27 面试题
村党支部对照检查材料思想汇报
2014/09/28 职场文书
个人自荐书怎么写
2015/03/26 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书