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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
js性能优化技巧
Nov 29 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
js实现页面图片消除效果
Mar 24 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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中isset()和unset()函数的用法小结
2014/03/11 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
js实现简易ATM功能
2020/10/27 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Django中的用户身份验证示例详解
2019/08/07 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
C#面试题
2016/05/06 面试题
2014国培学习感言
2014/03/05 职场文书
会计专业导师推荐信
2014/03/08 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
婚宴父母致辞
2015/07/27 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL