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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
js打开新窗口方法整理
Feb 17 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
前端性能优化建议
Sep 17 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python如何定义带参数的装饰器
2018/03/20 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
python制作微博图片爬取工具
2021/01/16 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
小学教师学期末自我评价
2013/09/25 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
体育教师自荐信范文
2013/12/16 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
三好学生竞选稿
2015/11/21 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL