`
WaterSugar
  • 浏览: 94314 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

jQuery.js中继承的实现

    博客分类:
  • Ajax
阅读更多

 

  对于JavaScript语言,虽然标榜是面向对象的语言,但是和那些像Java一样传统的面向对象的语言相比,其面向对象的实现,总显得一些别扭。就拿继承来说吧,传统面向对象的语言都是在语言层面上支持了,而JavaScript就要自己来实现继承这个功能了,下面来看看jQuery.js是怎么实现这个功能的。

 

  在jQuery.js中有一个jQuery.extend()的静态方法,它提供了jQuery.js中的整个继承功能,也是jQuery.js中的一个重要的方法,其代码分析如下:

jQuery.extend = jQuery.fn.extend = function(obj, prop) {
  // 防止传入错误的参数prop;
  if( argumnets.length > 1 && ( prop === null || prop == undefined)
    return obj;

  // 如果prop为空,则将obj扩展到自己身上,jQuery.js中大部分都是为空;
  if( !prop ) {
    prop = obj;
    obj = this;
  }

  // 将prop的所有属性复制到obj;
  for (var i in prop )
    obj[ i ] = prop[ i ];

  return obj;
}

 

  这个方法与prototype.js中实现的也差不多,在prototype.js中少的只是没有参数prop的判断,而在调用这个方法的时候也存在一点点差异,在prototype.js中一般是明确指定扩展到谁,而在jQuery.js中一般只有需要扩展的方法,而没有明确再指定一个需要扩展到谁,这个是通过extend()方法内部的判断来指定。

 

  在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend()的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点,如下代码可以更好的体会这一点。

<script type = "text/javascript">
  // 定义一个类,构造函数;
  var testClass = function() {
    this.name = "Woody";
  };

  // 通过prototype对象定义类的其他成员;
  testClass.prototype = {
    altName: function() {
      testClass.altName( this.name );  // 调用testClass.altName()方法;
    }
  };

  // 实现继承的方法;
  testClass.extend = function(o, p) {
    if ( !p ) { p = o; o = this; }
    for ( var i in p ) o[ i ] = p[  i ];
    return o;
  };

  // 对testClass进行扩展;
  testClass.extend({
    altName: function( str ) {
      alert( "My name is " + str);
    },
    add: function( i ) {
      alert( ++i );
    }
  });

  var tc = new testClass(); // 实例化一个tesClass对象;

  // 反射机制,看tc实例继承了哪些属性方法;
  // 从运行结果来看,它只继承了name,altName();
  for ( var i in tc ) alert( i + " = " + tc[ i ]);

  // 调用tc实例的altName()方法,而在定义中又调用testClass.altName()方法;
  tc.altName();

  // 该方法只能通过类来调用,不能通过实例来调用,比如tc.add(0)就会出错;
  testClass.add( 0 );
</script>

 

分享到:
评论

相关推荐

    jQuery.js中继承的实现.pdf

    这使得在JavaScript中实现复杂的对象模型和继承关系变得更加简单和直观。在实际开发中,`jQuery.extend()`不仅用于实现继承,还常用于配置选项、合并配置对象等场景,是jQuery库中的一个核心功能。

    jquery.tmpl.js

    jQuery tmpl.js是由jQuery团队开发的一个轻量级的模板引擎,其主要目标是简化JavaScript中的数据绑定和动态渲染。v1.0版本包括了基本的jquery.tmpl.js和增强版的jquery.tmplPlus.js,以及它们的min版本,用于生产...

    jquery.ui.widget.js

    在`jquery.fileupload.js`中,`FileUpload`类是核心,它继承自jQuery UI Widget,拥有初始化、设置选项、处理文件添加、开始上传等一系列方法。在实例化`FileUpload`时,我们可以配置各种参数,如上传URL、允许的...

    jquery 1.12.4.min.js

    在实际应用中,我们可能会将jQuery 1.12.4.min.js文件存储在一个单独的压缩包中,例如“jquery1.12.4.zip”,这样方便管理和传输。当需要在项目中使用时,可以解压这个zip文件,将其中的jQuery库引入到HTML页面中,...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    首先,jQuery 1.11.3是官方发布的一个稳定版本,它继承了jQuery一贯的易用性和兼容性,支持多种浏览器环境,包括IE6及以上版本。这个版本的发布,主要关注于性能优化和bug修复,旨在提供更稳定的运行环境。 1. **...

    jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】

    首先,我们来看标题中的两个文件:"jquery-1.8.3.js" 和 "jquery-1.8.3.min.js"。这两个文件都是jQuery 1.8.3的核心库,但它们之间存在显著的区别。"jquery-1.8.3.js"是未压缩和未优化的源代码版本,适合在开发环境...

    jquery-2.1.4.js

    标题中的“jquery-2.1.4.js”指的是jQuery库的一个具体版本——2.1.4。这个版本在2015年发布,是jQuery 2.x系列的一个稳定版本,它针对现代浏览器进行了优化,去除了对IE6、7、8的兼容性支持,从而实现了更快的执行...

    前端项目-jquery.turbolinks.zip

    总的来说,`jquery.turbolinks`插件为使用Turbolinks的前端项目提供了一种优雅的解决方案,解决了因页面部分替换导致的JavaScript事件丢失问题,使得开发者能够更加专注于应用的功能实现,而不必过于担忧Turbolinks...

    jQuery.js执行过程分析[收集].pdf

    总结起来,jQuery.js的执行过程涉及构造函数、prototype对象扩展、继承机制、浏览器特性检测、事件处理、DOM操作和Ajax功能等多个层面,构建了一个功能强大的JavaScript库,极大地提高了开发效率和代码可读性。...

    jquery.htmler - 1.0.js

    5. **兼容性**:作为基于jQuery的插件,它继承了jQuery的良好浏览器兼容性,支持多种现代和旧版浏览器。 ### 四、使用方法 要使用jQuery.htmler,首先确保页面已经引入了jQuery库。然后,可以通过以下步骤集成和...

    Struts2+jquery.form.js实现图片与文件上传的方法

    在本文中,我们将深入探讨如何使用Struts2框架与jquery.form.js插件来实现图片和文件的异步上传。这是一个常见的需求,特别是在构建交互性强的Web应用时,用户需要能够方便快捷地上传文件,如图片。 首先,让我们...

    jQuery.fn和jQuery.prototype区别介绍

    在JavaScript和jQuery的世界里,`jQuery.fn` 和 `jQuery.prototype` 是两个非常关键的概念,它们密切相关,但有着明确的区别。了解这些概念对于深入理解和自定义jQuery插件是至关重要的。 首先,`jQuery.fn` 是 `...

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html &lt;!-- HTML结构 --&gt; &lt;option value="1"&gt;Option 1 ...

    jquery.PrintArea.rar

    《jQuery PrintArea插件:实现页面局部打印的详解与应用》 在网页开发中,有时候我们需要提供用户打印页面上的特定区域而不是整个页面。jQuery PrintArea插件正为此目的而设计,它允许开发者轻松地实现页面的局部...

    javascript框架(json.jQuery.prototype).rar

    这个原型链是JavaScript实现继承的基础,一个对象可以继承其原型对象的属性和方法。`prototype`属性主要用于函数(在JavaScript中,函数也是对象),当函数被用作构造函数时,新创建的对象将继承该函数的`prototype`...

    jQuery.extend

    **jQuery.extend** ...总之,jQuery.extend是jQuery库中的一个强大工具,通过它我们可以方便地合并对象,实现对象的扩展和复制。理解其工作原理和各种用法,能帮助我们更有效地编写JavaScript代码。

    jquery.easyui-1.2.5源码未压缩版

    例如,`datagrid.js` 文件用于实现数据网格的功能,`window.js` 文件则负责窗口组件的管理。 1. **事件处理**:EasyUI 使用jQuery的事件模型,允许开发者通过绑定事件来响应用户的操作。源码中可以看到各种事件...

    jquery.editable.lite.js:就地编辑JQuery插件

    JQuery Editable Lite插件 ... 该插件的构建与在某种程度上与API兼容,但又轻巧又...包含JQuery之后,包括jquery.editable.lite.js文件。 如果您使用的是JQuery UI自动完成插件,请确保包含了javascript。 如果要使用tex

    jquery.validate 扩展身份证校验方法

    该插件基于jQuery库开发,因此它继承了jQuery的所有优点,如简洁、易用等。 #### 身份证号码校验方法详解 根据给定的描述,我们可以看到一个名为`idCardNo`的自定义验证方法被添加到了`jQuery.validator`中。这个...

Global site tag (gtag.js) - Google Analytics