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 相关文章推荐
js 文本滚动效果的实例代码
Aug 17 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php开启openssl的方法
2014/05/15 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
python实现2048小游戏
2015/03/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python列表解析操作实例总结
2020/02/26 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
三年级数学教学反思
2014/01/31 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
反四风对照检查材料
2014/09/22 职场文书
总经理检讨书范文
2015/02/16 职场文书
英语投诉信范文
2015/07/03 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸