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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
浅谈React中组件间抽象
Jan 27 Javascript
vue中轮训器的使用
Jan 27 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 jQuery
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
BBS(php & mysql)完整版(六)
2006/10/09 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Javascript this指针
2009/07/30 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python实现排序算法解析
2018/09/08 Python
在Python中增加和插入元素的示例
2018/11/01 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
大二自我鉴定范文
2013/10/05 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
经济类毕业生求职信
2014/06/26 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android