`
enix2212
  • 浏览: 25385 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery创建实例与原型继承揭秘

阅读更多
       在普通情况下我们要用原生类、或者自定义类创建实例要用new运算符,使构造函数创建一个实例,并且实例继承构造器prototype上的所有共有方法。如 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创建实例与原型继承的机制前,我们先了解下JavaScript中类与实例创建的一般过程。在JavaScript中,构造函数配合new关键字可以创建一个新的实例对象,这个新对象会自动拥有构造函数的prototype属性上定义...

    jquery经典实例60例-动画实例

    《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果的宝贵资源,它涵盖了从基础到高级的各种动画技巧。jQuery库以其简洁、强大的API而闻名,尤其是在处理页面元素的动态展示和动画效果方面。以下将详细介绍...

    PHP与jQuery开发实例源码

    《PHP与jQuery开发实例源码》是一份宝贵的资源,它包含了使用这两种技术构建实际应用的示例代码。这本书深入浅出地介绍了如何结合PHP和jQuery,利用它们的强大功能来提升Web开发效率。PHP是一种服务器端脚本语言,常...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    1. **jQuery与AJAX基础** - jQuery提供了$.ajax()函数,使得发起AJAX请求变得简单。该函数允许我们指定URL、请求类型(GET或POST)、数据、回调函数等参数,实现异步数据通信。 - AJAX的核心优势在于其非阻塞特性...

    JQuery应用实例学习(强烈推荐)

    JQuery应用实例学习(强烈推荐)---无私奉献了!!

    Jquery 学习与实例Jquery 学习与实例

    Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...

    50个Jquery经典实例 50个Jquery经典实例

    《50个jQuery经典实例》是一份集合了众多实用且高效jQuery代码的资源,它旨在帮助开发者提升在网页开发...通过学习和实践这些实例,开发者能够更好地掌握jQuery,提高开发效率,创建出更具交互性和用户体验的网页应用。

    jquery应用实例

    《jQuery应用实例详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API和强大的功能,深受开发者喜爱。本篇文章将深入探讨jQuery在实际应用中的多种实例,帮助读者掌握并熟练运用jQuery,提升...

    jQuery实例视频教程

    教程名称:jQuery实例视频教程课程目录:【】jQuery实例-商城放大镜效果【】jQuery实例-图片放大效果【】jQuery实例-图片转动立体效果【】jQuery实例-对联广告【】jQuery实例-返回顶部(解决IE6固定定位)【】jQuery...

    锋利的jQuery+实例

    7. **插件开发与使用**:了解jQuery插件的基本架构,以及如何封装自己的功能为插件。同时,可以学习书中提到的一些常用插件,如轮播图、下拉菜单和表单验证插件的实现原理。 8. **实战案例**:书中提供的实例涵盖了...

    jQuery_的原型关系图

    在这个图中,我们可以看到对象之间的继承关系,以及jQuery如何扩展和利用JavaScript的原型链机制。 首先,让我们讨论JavaScript的原型(Prototype)概念。在JavaScript中,每个对象都有一个内置的`__proto__`属性,...

    jQueryUI官方实例集

    《jQueryUI官方实例集》是面向开发者的一份宝贵资源,它包含了jQueryUI库的各种实际应用案例,旨在帮助用户深入理解和熟练运用jQueryUI的各种组件和功能。jQueryUI是jQuery项目的一个扩展,提供了丰富的用户界面插件...

    jquery特效实例打包

    《jQuery特效实例详解与应用深度探索》 在Web开发领域,jQuery库以其强大的功能和简洁的API,成为了JavaScript开发者们的首选工具。本篇文章将围绕"jQuery特效实例打包"这一主题,深入探讨100个精心挑选的jQuery...

    jQuery实例大全

    这个实例展示了如何利用jQuery来创建一个可交互的登录框。通过jQuery的选择器定位到HTML元素,然后使用`.show()`和`.hide()`方法实现登录框的显示与隐藏,这使得用户界面更加动态且响应迅速。同时,结合事件监听,如...

    锋利的JQUERY实例源码

    实例源码的提供更是让理论与实践相结合,加速了学习过程。这里,我们将深入探讨jQuery的核心知识点,以及这些实例如何帮助我们理解和运用它们。 1. **选择器**:jQuery的选择器是其强大之处,它允许我们以简洁的...

    Jquery实例和api

    **jQuery 实例与 API** jQuery 是一款广泛应用于Web开发中的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个压缩包包含的是关于jQuery的实例和API文档,对于深入理解和使用jQuery...

    jquery实例大全

    **jQuery实例大全** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。这个“jQuery实例大全”集合了众多实用的jQuery特效和功能,旨在帮助开发者快速理解和应用jQuery...

    jquerycookie实例

    而关于“jquerycookie实例”,我们主要讨论的是如何利用jQuery扩展来处理浏览器中的Cookie。Cookie是Web开发中用于存储客户端小量数据的一种机制,它们在用户浏览网页时起到跟踪用户行为、保存登录状态等作用。 ...

    精通JavaScript+jQuery(实例)

    2. 函数与对象:掌握函数的使用和对象的创建,包括原型和原型链的概念。 3. DOM操作:学习如何使用JavaScript操作HTML元素,如增删改查。 4. 事件处理:理解事件监听和事件冒泡,实现动态交互。 5. jQuery入门:介绍...

Global site tag (gtag.js) - Google Analytics