jquery源码'jQuery.fn.init.prototype'
一般我们在创建构造函数即使用的时候会这样写,使用的时候会使用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'的更多相关文章
- jQuery源码框架fn解读
(function( window, undefined ){ var jQuery = (function(){ var jQuery = function( selector, context ) ...
- jQuery源码-jQuery.fn.attr与jQuery.fn.prop
jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...
- 读jQuery源码 jQuery.data
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...
- JQuery源码-------JQuery中数值型变量的判断isNumeric
判断一个数值型变量的方法,在jquery中非常简单,只有一行代码. isNumeric: function( obj ) { // parseFloat NaNs numeric-cast false ...
- jQuery源码中的“new jQuery.fn.init()”什么意思?
所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
随机推荐
- pandas 读mysql数据库(整个表或者表的指定列)
问题1:如何从数据库中读取整个表数据到DataFrame中? 首先,来看很容易想到的的办法 def read_table_by_name(self, table_name): "" ...
- MyBatis 的缓存机制
缓存机制可以减轻数据库的压力,原理是在第一查询时,将查询结果缓存起来,之后再查询同样的sql, 不是真的去查询数据库,而是直接返回缓存中的结果. 缓存可以降低数据库的压力,但同时可能无法得到最新的结果 ...
- Scala中的柯里化
一.初识Currying柯里化 柯里化(Currying)技术 Christopher Strachey 以逻辑学家 Haskell Curry 命名的(尽管它是 Moses Schnfinkel ...
- Python——函数,模块,简单文件读写(python programming)
函数(function)定义原则: 最大化代码重用,最小化代码冗余,流程符合思维逻辑,少用递归; 函数的定义方法: def function_name(param_1, param_2): ..... ...
- 学习笔记之Data Science
Data science - Wikipedia https://en.wikipedia.org/wiki/Data_science Data science, also known as data ...
- 修改ECSHOP的小数点保留位数
客户站点http://carfa.hk79.2ifree.com 原来的程序直接取整了,现在做下面修改. 首先打开文件 /carfa/web/includes/lib_common.php 第一步:在 ...
- ZBench: 服务器一键测试脚本 / 自带结果导出vps网络测试
zbench主站: https://blog.liyuans.com/archives/Zbench.html 脚本来自友链 主机博客,项目地址为 https://github.com/Functio ...
- Python首次安装后运行报错(0xc000007b)的解决方法
最近在安装完Python后运行发现居然报错了,错误代码是0xc000007b,于是通过往上查找发现是因为首次安装Python缺乏VC++库的原因,下面通过这篇文章看看如何解决这个问题吧. 错误提示 ...
- python 实现排序算法(三)-选择排序和冒泡排序
#/usr/bin/env python #coding:utf-8 #@auther="livermorium" ''' 选择排序 从数据中选择最小值,排在位置首位 再从剩余未排 ...
- http请求状态及其含义表
1xx - 信息提示 100 - 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 - 服务器将遵从客户的请求转换到另外一种协议.(HTTP 1.1新) 2xx ...