jQuery中创建实例与原型继承揭秘
如 new Object()、new Date()等等!(object有{},数组有[]这样的快捷方式 ,我们主要探讨new这种方式。)
我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙,提高了使用的爽快度。我们来看看他的源码。
代码如下:
funtion jQuery( selector, context){
return new jQuery.fn.init( selector, context );
}
这里可以看出jQuery是有构造函数的,也是用了new 创建实例的。那么jQuery.fn是什么呢?后面有个这样的处理:
代码如下:
jQuery.fn = jQuery.prototype={
init:function (){}
}
这样我们就明白了,jQuery的构造函数是他原型上的init方法,而不是function jQuery。这样的话每次调用$()他都会用jQuery原型上的init创建一个实例,那么新的问题来了。如果用init创建实例的话,这个对象继承的是init的prototype上的方法而不会继承jQuery prototype上的方法,那么他是怎么实现原型继承的呢?
jQuery.fn.init.prototype = jQuery.fn;
这里他有一个这样的处理,把jQuery.fn赋值给了jQuery.fn.init.prototype ,这一步很关键。我门看看这些是什么。
jQuery.fn是jQuery.prototype
jQuery.fn.init.prototype是jQuery.prototype.init.prototype
这个处理相当于
jQuery.prototype = jQuery.prototype.init.prototype
那么每当我们调用$()是,jQuery就会用new运算符调用他prototype上的init创建一个实例,这个由init创建实例会继承jQuery protype上的所有方法,并且这个实例的__proto__内部属性会指向jQuery的prototype属性。
另外我们注意到这个处理:
jQuery.fn = jQuery.prototype
这是他为了避免频繁的操作jQuery.prototype,所以用jQuery.fn缓存了jQuery.prototype。
这些的处理实在是非常巧妙,内部处理了实例创建不用使用者用new去生成实例,又非常漂亮的处理了prototype保证多实例共享方法减少资源开支。
相关推荐
-
jQuery学习笔记之jQuery原型属性和方法
复制代码 代码如下: jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { }, selector: "", jquery: "1.7.2", length: 0, size: function() {}, toArra
-
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
请求数据 我们可以使用 GET.POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为: if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') { echo '23'; } 当前页面内容为: <div> <a href="age.php">stephen</a> <span>age : <
-
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
观察函数 ajaxStart 和 ajaxStop 函数可以用来作为观察函数,我们可以使用观察函数的回调函数来做相应的处理. 当 Ajax 请求开始且尚未进行其他传输时,会触发 ajaxStart 的回调函数. 当最后一次活动请求终止时,则会执行通过 ajaxStop 注册的回调函数. 由于观察函数具备全局性,所以需要使用 $(document) 来调用.我们通过使用 Ajax 方法取得一个图片的例子来测试两个函数: 当前页面为: <div></div> <button>
-
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
简介 对于combox功能实现的最小化js代码,页面原型参考dojo的combox模样,支持键盘动作以及自动筛选,高亮等 API 初始化方法 编码方式 var c=new combox(document.getElementById('a')); 或者 var c=new combox(document.getElementById('a'),{ debug:true }); Css申明方式 <select class="combox" debug="true"
-
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
false.toString(); // 'false' [1, 2, 3].toString(); // '1,2,3' function Foo(){} Foo.bar = 1; Foo.bar; // 1 一个经常容易被误解的就是数字常量不能视为对象,实际上数字常量仍然可以视为对象.这是因为 Javascript 解析器在解析点操作符时而将其视为浮点数特征而犯下的错误. 2.toString(); // raises SyntaxError 实际上,我们有很多方法可以使得数字常量表现为一个
-
jQuery 版元素拖拽原型代码
本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例.在引入 Jquery.js 后: 复制代码 代码如下: <script type="text/javascript"> $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x
-
Javascript 学习笔记之 对象篇(二) : 原型对象
Javascript 是唯一一个被广泛运用的原型式继承的语言,所以理解两种继承方式的差异是需要时间的. 第一个主要差异就是 Javascript 使用原型链来继承: function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} 设置 Bar 的 prototype 为 Foo 的对象实例: Bar.prototype = new Foo(); Bar.prototy
-
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: <div></div> <button>load</button> 同目录下的 test.html 文件内容为: <span>test</span> 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $('button').click(function() { $('div').load('test.
-
jQuery中创建实例与原型继承揭秘
如 new Object().new Date()等等!(object有{},数组有[]这样的快捷方式 ,我们主要探讨new这种方式.) 我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙,提高了使用的爽快度.我们来看看他的源码. 复制代码 代码如下: funtion jQuery( selector, context){ return new jQuery.fn.init( select
-
jQuery中$原理实例分析
本文实例讲述了jQuery中$原理.分享给大家供大家参考,具体如下: 1.外层沙箱及命名空间$ 为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行",jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象),如只暴露 $ 和 jQuery 这2个变量给外界: (function(window, undefined) { // 用一个函数域包起来,就是所谓的沙箱 // 在这里边var定义的变量,属于这个函数域内的局部变量
-
javascript原型继承工作原理和实例详解
先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl
-
JQuery中serialize()用法实例分析
本文实例讲述了JQuery中serialize()用法.分享给大家供大家参考.具体分析如下: 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身.序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语法: $(selector).serialize() 详细说明 1..seria
-
jquery中change()用法实例分析
本文实例分析了jquery中change()的用法.分享给大家供大家参考.具体分析如下: change()当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素. 当用于 select 元素时,change 事件会在选择某个选项时发生.当用于 text field 或 text area 时,该事件会在元素失去焦点时发生. 一.change的用法 1.触发 change 事件:触发被选元素的 change
-
JQuery中serialize() 序列化
本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2-)后提交.下面介绍JQuery中serialize()的用法 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对
-
jQuery事件用法实例汇总
本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值.分享给大家供大家参考之用.具体用法如下: 1.通过方法名给元素绑定事件: $('li').click(function(event){}) 2.通过bind方法给元素绑定事件: $('li') .bind('click',function(event){}) .bind('click',function(event){}) 可见,通过bind,可以给元素绑定多个事件. 3.事件的命名空间 为什么需要事件命名空
-
jQuery中$.extend()用法实例
本文实例讲述了jQuery中$.extend()用法.分享给大家供大家参考.具体分析如下: $.extend()方法定义如下: jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 如果不指定target,则给jQuery命名空间本身进行扩展.这有助于插件作者为jQuery增加新方法. 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象.否则的话,副本会与
-
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
本文实例讲述了JS中创建自定义类型的常用模式.分享给大家供大家参考,具体如下: 虽然在 ES6 中,已经出了 class 的语法,貌似好像不用了解 ES5 中的这些老东西了,但是越深入学习,你会发现理解这些模式的重要性. 在本文中,我会描述 7 种常用的创建自定义类型的模式:工厂模式.构造函数模式.原型模式.组合使用构造函数模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.分别给出他们的示例代码,并分析他们的利弊,方便读者选择具体的方式来构建自己的自定义类型. 最后,我会指出 ES6 中的
-
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制
随机推荐
- 跟老齐学Python之关于循环的小伎俩
- bsmain.exe 瑞星仇恨者查杀方法
- Centos6.5全自动安装 vsftpd+dhcp+nfs+tftp
- Windows Server 2008 R2上部署Exchange Server 2010图文教程
- Python中的模块和包概念介绍
- 建站常用13种PHP开源CMS比较
- PHP函数eval()介绍和使用示例
- Symfony2联合查询实现方法
- php 动态执行带有参数的类方法
- 由Python运算π的值深入Python中科学计算的实现
- C语言基本排序算法之shell排序实例
- MySQL 5.6 & 5.7最优配置文件模板(my.ini)
- 让手机访问WAP网站服务器 IIS WAP服务器的MIME类型设置
- Android中imageview.ScaleType使用方法详细介绍
- Android编程实现圆角边框布局效果的方法
- JavaScript实现多重继承的方法分析
- Android利用广播接收器实现自动填充短信验证码
- 易语言调用api获取网卡信息网络连接名的代码
- python实现合并多个list及合并多个django QuerySet的方法示例
- json数据格式常见操作示例