一般我们在创建构造函数即使用的时候会这样写,使用的时候会使用new 关键字,先实例化,然后使用。

    function test(name, age) {
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name+ ', say hello');
}
}
var ls = new test('ls',);
ls.sayHello();

然而在使用jquery 的时候 都是直接使用其方法,不需要使用new 关键字。

看了下jquery源码,在jquery 有这样一段代码:

var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

在这段代码中,jQuery()方法返回了 jQuery.fn.init() 的构造方法的实例化对象。

所以我们可以在使用 jQuery 方法的时候 ,可以直接使用其公有方法,例如 text(),不需要new 一个实例化对象,然后再使用其公有方法,例如:

jQuery('button').text()

但是这还看不出 跟 jQuery.fn.init.prototype 有什么关联,再看  jQuery.fn.init,jQuery.prototype 赋值给了jQuery.fn ,init 是其对象属性上的一个方法

    jQuery.fn = jQuery.prototype = {
init:function(){
//其他代码
return this;
},
      // .... 其他方法
jquery: '1.01'
}

但此时问题来了,new jQuery.fn.init() 所返回的新对象并没有继承 jQuery.fn (即 jQuery 原型对象),因为jQuery.fn.init.prototype仅仅是指向了一个function对象的原型,并不包含jQuery.fn。这时,是彻底地将jQuery.fn给封锁了起来。这样是不能使用 jQuery原型对象中公有的方法,

让jQuery.fn.init.prototype指向jQuery.fn

在 jQuery.fn 之后还有如下一段代码:

jQuery.fn.init.prototype = jQuery.fn;

默认情况下 jQuery.fn.init.prototype 是指向的 Object.prototype, 让他指向 jQuery.prototype (即 jQuery.fn),jQuery.fn.init 就继承了 jQuery.prototype,则就可以访问其他公有的方法

在jquery 源码中 jQuery.fn.init.prototype 、 jQuery.prototype 、  jQuery.fn 三者间的关系,我认为应该是:

  • jQuery.prototype,挂载jQuery对象的原型方法;
  • jQuery.fn 是 jQuery.prototype的别名 简单书写
  • jQuery.fn.init.prototype,则是为了让jQuery.fn.init这个工厂方法能够继承jQuery.fn上的原型方法。从而简化最终使用方法,不需要 new即可使用

jquery源码'jQuery.fn.init.prototype'的更多相关文章

  1. jQuery源码框架fn解读

    (function( window, undefined ){ var jQuery = (function(){ var jQuery = function( selector, context ) ...

  2. jQuery源码-jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...

  3. 读jQuery源码 jQuery.data

    var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...

  4. JQuery源码-------JQuery中数值型变量的判断isNumeric

    判断一个数值型变量的方法,在jquery中非常简单,只有一行代码. isNumeric: function( obj ) { // parseFloat NaNs numeric-cast false ...

  5. jQuery源码中的“new jQuery.fn.init()”什么意思?

    所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...

  6. jquery 源码解析

    静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...

  7. jQuery源码解析资源便签

    最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...

  8. jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  9. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

随机推荐

  1. uoj#187. 【UR #13】Ernd

    http://uoj.ac/problem/187 每个点只能从时间,b+a,b-a三维都不大于它的点转移过来,将点按时间分成尽量少的一些段,每段内三维同时非严格单调,每段内的点可能因为连续选一段而产 ...

  2. Mongodb安装超长等待

    最近安装了一下mongodb最新版3.6下载各个版本安装都是停在installing MongoDB Compass位置,网上看到说可以等段时间之类的发现等了1个晚上居然还没成功,取消安装也不行. 于 ...

  3. JavaScript之图片操作5

    本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...

  4. MySQL并发复制系列一:binlog组提交 (转载)

    http://blog.csdn.net/woqutechteam/article/details/51178803 MySQL  Binary log在MySQL 5.1版本后推出主要用于主备复制的 ...

  5. openstack热添加磁盘

    假定在虚拟机当中添加了磁盘,但是虚拟机没有识别出来:如何识别出来 可以使用命令 echo '- - -' >/sys/class/scsi_host/host0/scan 使用后就可以识别出来了 ...

  6. 一个源文件可以写出多个class吗?编译后,会不会生成多个class文件?

    会.一个.java源文件里面可以有内部类.其他类(有且仅有一个类可以声明为public),所以编译后,可以有多个class文件.

  7. is与==

     is和==的区别 1. id() 通过id()我们可以查看到⼀一个变量表示的值在内存中的地址. a1 = 100 b1 = 100 print(id(a1),id(b1)) #14071247240 ...

  8. [UE4]蓝图:重写父类时调用父类方法

    右键重写的方法选择“Add call to parent function” 一定要善用这个功能,实现原有父类功能的同时实现子类特别的功能.

  9. C语言:结构体,共用体

    结构体: 一个变量,存储不同类型的数据项共用体:一个变量,存储不同类型的数据项,相同的内存位置,存储不同的数据类型 #include <stdio.h> #include <stri ...

  10. Koa快速入门教程(一)

    Koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架,采用了async和await的方式执行异步操作. Koa有v1.0与v2.0两个版本,随着nod ...