对于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>
分享到:
相关推荐
这使得在JavaScript中实现复杂的对象模型和继承关系变得更加简单和直观。在实际开发中,`jQuery.extend()`不仅用于实现继承,还常用于配置选项、合并配置对象等场景,是jQuery库中的一个核心功能。
jQuery tmpl.js是由jQuery团队开发的一个轻量级的模板引擎,其主要目标是简化JavaScript中的数据绑定和动态渲染。v1.0版本包括了基本的jquery.tmpl.js和增强版的jquery.tmplPlus.js,以及它们的min版本,用于生产...
在`jquery.fileupload.js`中,`FileUpload`类是核心,它继承自jQuery UI Widget,拥有初始化、设置选项、处理文件添加、开始上传等一系列方法。在实例化`FileUpload`时,我们可以配置各种参数,如上传URL、允许的...
在实际应用中,我们可能会将jQuery 1.12.4.min.js文件存储在一个单独的压缩包中,例如“jquery1.12.4.zip”,这样方便管理和传输。当需要在项目中使用时,可以解压这个zip文件,将其中的jQuery库引入到HTML页面中,...
首先,jQuery 1.11.3是官方发布的一个稳定版本,它继承了jQuery一贯的易用性和兼容性,支持多种浏览器环境,包括IE6及以上版本。这个版本的发布,主要关注于性能优化和bug修复,旨在提供更稳定的运行环境。 1. **...
首先,我们来看标题中的两个文件:"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。这个版本在2015年发布,是jQuery 2.x系列的一个稳定版本,它针对现代浏览器进行了优化,去除了对IE6、7、8的兼容性支持,从而实现了更快的执行...
总的来说,`jquery.turbolinks`插件为使用Turbolinks的前端项目提供了一种优雅的解决方案,解决了因页面部分替换导致的JavaScript事件丢失问题,使得开发者能够更加专注于应用的功能实现,而不必过于担忧Turbolinks...
总结起来,jQuery.js的执行过程涉及构造函数、prototype对象扩展、继承机制、浏览器特性检测、事件处理、DOM操作和Ajax功能等多个层面,构建了一个功能强大的JavaScript库,极大地提高了开发效率和代码可读性。...
5. **兼容性**:作为基于jQuery的插件,它继承了jQuery的良好浏览器兼容性,支持多种现代和旧版浏览器。 ### 四、使用方法 要使用jQuery.htmler,首先确保页面已经引入了jQuery库。然后,可以通过以下步骤集成和...
在本文中,我们将深入探讨如何使用Struts2框架与jquery.form.js插件来实现图片和文件的异步上传。这是一个常见的需求,特别是在构建交互性强的Web应用时,用户需要能够方便快捷地上传文件,如图片。 首先,让我们...
在JavaScript和jQuery的世界里,`jQuery.fn` 和 `jQuery.prototype` 是两个非常关键的概念,它们密切相关,但有着明确的区别。了解这些概念对于深入理解和自定义jQuery插件是至关重要的。 首先,`jQuery.fn` 是 `...
首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html <!-- HTML结构 --> <option value="1">Option 1 ...
《jQuery PrintArea插件:实现页面局部打印的详解与应用》 在网页开发中,有时候我们需要提供用户打印页面上的特定区域而不是整个页面。jQuery PrintArea插件正为此目的而设计,它允许开发者轻松地实现页面的局部...
这个原型链是JavaScript实现继承的基础,一个对象可以继承其原型对象的属性和方法。`prototype`属性主要用于函数(在JavaScript中,函数也是对象),当函数被用作构造函数时,新创建的对象将继承该函数的`prototype`...
**jQuery.extend** ...总之,jQuery.extend是jQuery库中的一个强大工具,通过它我们可以方便地合并对象,实现对象的扩展和复制。理解其工作原理和各种用法,能帮助我们更有效地编写JavaScript代码。
例如,`datagrid.js` 文件用于实现数据网格的功能,`window.js` 文件则负责窗口组件的管理。 1. **事件处理**:EasyUI 使用jQuery的事件模型,允许开发者通过绑定事件来响应用户的操作。源码中可以看到各种事件...
JQuery Editable Lite插件 ... 该插件的构建与在某种程度上与API兼容,但又轻巧又...包含JQuery之后,包括jquery.editable.lite.js文件。 如果您使用的是JQuery UI自动完成插件,请确保包含了javascript。 如果要使用tex
该插件基于jQuery库开发,因此它继承了jQuery的所有优点,如简洁、易用等。 #### 身份证号码校验方法详解 根据给定的描述,我们可以看到一个名为`idCardNo`的自定义验证方法被添加到了`jQuery.validator`中。这个...