jQuery.fn和jQuery.prototype区别介绍


Posted in Javascript onOctober 05, 2013

近期在读jQuery的源码。

发现这里有个东西很难理解。

这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么。

来看下jQuery的源码是怎么样定义的:

(function( window, undefined ) { var jQuery = (function() { 
// 构建jQuery对象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 
// jQuery对象原型 
jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// something to do 
} 
}; 
// Give the init function the jQuery prototype for later instantiation 
jQuery.fn.init.prototype = jQuery.fn; 
// 合并内容到第一个参数中,后续大部分功能都通过该函数扩展 
// 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数 
jQuery.extend = jQuery.fn.extend = function() {}; 
// 在jQuery上扩展静态方法 
jQuery.extend({ 
// something to do 
}); 
// 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展 
return jQuery; 
})(); 
window.jQuery = window.$ = jQuery; 
})(window);

这里我们可以看到:
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
}

jQuery 其实jQuery.fn.init()返回一个对象。那么jquery.fn.init()返回的又是什么呢?
jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// something to do 
} 
};

就是从这里来的,一个javascript对象。

这里有个问题。

jQuery.fn = jQuery.prototype

那么就是 将jQuery 的原型对象赋值给了 jQuery.fn。

再看下面:

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

看到这里我有一个想法。就是 将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype.是什么?

是不是没有?这个时候它的原型是{};

那么为了可以去调用init外面的方法。就做了一个处理。

将jQuery.fn 赋值给jQuery.fn.init.prototype.这样的话,

jQuery.fn.init.prototype的原型也就是jQuery的原型对象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

赋值了以后。在调用的时候,当init中没有方法的时候,就会去原型函数中调用。

那么这样的话。

你可能会想到这样一个东东:

jQuery.extends() 
jQuery.fn.extends()

我想你应该明白它们的区别了吧。

jQuery.extends()是直接扩展jQuery.而jQuery.fn.extends(),很明显是扩展的原型。

这就是为什么jQuery.fn.extends()中的大部分方法来自己于jQuery.extends()。

这里又将 jQuery.fn 赋值给了 jQuery.fn.init.prototype.

那么就有这样的一个关系:

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype
Javascript 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
深入分析javascript中console命令
Aug 14 Javascript
Puppet的一些技巧
Sep 17 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
javascript自启动函数的问题探讨
Oct 05 #Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
jquery parent和parents的区别分析
Oct 02 #Javascript
jQuery插件 selectToSelect使用方法
Oct 02 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python在不同层级目录import模块的方法
2016/01/31 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python3实现磁盘空间监控
2018/06/21 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
初中女生自我鉴定
2013/12/19 职场文书
财务部经理岗位职责
2014/02/03 职场文书
岗位说明书怎么写
2014/07/30 职场文书
演讲比赛主持词
2015/06/29 职场文书
新年寄语2016
2015/08/17 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers