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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
动态表格Table类的实现
Aug 26 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php微信公众号开发模式详解
2016/11/28 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
python线程锁(thread)学习示例
2013/12/04 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python基于百度云文字识别API
2018/12/13 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
abstract class和interface有什么区别
2013/08/04 面试题
总经理岗位职责
2013/11/09 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
详解Vue router路由
2021/11/20 Vue.js