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中JSON.parse的影响概述
Jul 17 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue实现动态按钮功能
May 13 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
Apache2 httpd.conf 中文版
2006/12/06 PHP
php基础学习之变量的使用
2011/06/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
javascript里的条件判断
2007/02/27 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Python字符串转换成浮点数函数分享
2015/07/24 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
一套PHP的笔试题
2013/05/31 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
应聘自荐信
2013/12/14 职场文书
二年级学生评语大全
2014/04/23 职场文书
小学班主任评语
2014/12/29 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
执行力心得体会范文
2016/01/11 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js