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

所属分类: 网络编程 / JavaScript 阅读数: 1699
收藏 0 赞 0 分享

上学时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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多