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

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

赞 (0)

相关推荐

  • python解析json实例方法

    最近在做天气业务的延时监控,就是每隔一个小时检查一次天气数据是否变化,三次不变化就报警.由于页面给的数据的以json格式的,所以如何解析页面上的数据,从而获得我们想要的字段是我们首先考虑的问题.一般来说,当我们从一个网页上拿下来数据,就是一个字符串,比如: 复制代码 代码如下: url_data = urllib2.urlopen(url).readline() 当我们这样得到页面数据,url_data是全部页面显示一个json字符串,那么我们如何将这个字符串转变为字典格式:time = jso

  • JS随机生成不重复数据的实例方法

    昨天晚上在IBM上看了一篇关于在Java开发人员对于JavaScript看法的文章,感受很深,发现作为一个Java开发人员应该要懂得而且还要熟练JavaScript的能力.毕竟现在的JavaScript已经非常强大了,在Jquery,Ext等插件的注入后.已经慢慢再次受到Java开发人员的青睐了.下面因为项目需要,特地编写了一个生成随机数的方法,而且是不重复.代码如下:Javascript代码 复制代码 代码如下: // 定义存放生成随机数的数组 var array=new Array(); /

  • js静态方法与实例方法分析

    js静态方法 复制代码 代码如下: function foo(){} // 声明类 foo.method = function(){} // 方法体 使用:foo.method() js实例方法 function foo(){ // 声明类 this.method = function(){ // 方法体 } } 使用:var f = new foo(); f.method();

  • JS 各种网页尺寸判断实例方法

    复制代码 代码如下: function reachBottom() {      var scrollTop = 0;     var clientHeight = 0;     var scrollHeight = 0;     if (document.documentElement && document.documentElement.scrollTop) {         scrollTop = document.documentElement.scrollTop;     }

  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    可爱的鼠标跟随 html{ background:#000;} body,html,input{ cursor:none;} body,html{ height:100%;} #cursor{ position:absolute; left:100px; top:100px; display:block;} window.onload = function(){ var oCursor = document.getElementById("cursor"); document.onmo

  • js面向对象之静态方法和静态属性实例分析

    本文实例讲述了js面向对象之静态方法和静态属性.分享给大家供大家参考.具体分析如下: 先看如下代码: 复制代码 代码如下: <script type="text/javascript"> function Bird(){  this.wing = 2;  this.fly = function(){   alert("我是鸟,我会飞");  } } var maque = new Bird();//创建maque对象后,我们可以使用Bird的方法和属性

  • jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）

    我选择了jQuery,最主要是它的思想"write less,do more",因为我是一个挑剔的人,以前写过的代码,会时不时翻出来,看看有没有可以精简,优化的地方.一来是对不断学习的推动,二来可以将新的思想,技术应用到里面去. 对于jQuery插件的写法,以前就有介绍过,网上也有很多例子. 这里简要地进行些写法,主要是简写的说明,见下列代码: <script type="text/javascript" src="jquery-1.4.2.js&q

  • js导出格式化的excel 实例方法

    复制代码 代码如下: function getTableDataByXML(inTable, inWindow) {    var rows = 0;    //alert("getTblData is " + inWindow);    var tblDocument = document;    if (!!inWindow && inWindow != "") {        if (!document.all(inWindow)) {   

  • Js动态添加复选框Checkbox的实例方法

    首先,使用JS动态产生Checkbox可以采用如下类似的语句: 复制代码 代码如下: var checkBox=document.createElement("input");checkBox.setAttribute("type","checkbox");checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用document.

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

    上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态

  • Javascript使用function创建类的两种方法(推荐)

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它

  • 区分中英文字符的两种方法(正则和charCodeAt())

    比如这次用到的我先前介绍过的Vanadium表单验证插件, 因为是E文中不存在占2个字符的字, 所以, 区分中英文字符就得自己扩展. 本文就将介绍两种区分中英文字符的方法: 利用正则和charCodeAt方法区分中英文字符. 区分中英文字符的两种方法: 正则和charCodeAt()方法@Mr.Think /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-heig

  • js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • Js得到radiobuttonlist选中值的两种方法(推荐)

    如下所示: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

  • 网页前端登录js按Enter回车键实现登陆的两种方法

    很简单的代码,这里介绍两种方法给大家. 第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <titl

  • JS获取地址栏参数的两种方法(简单实用)

    js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

  • JS实现至少包含字母、大小写数字、字符的密码等级的两种方法

    本文实例讲述了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法.分享给大家供大家参考.具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示,让用户设置高级密码.那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i <

随机推荐