jQuery.fn和jQuery.prototype区别。
近期在读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 instantiationjQuery.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
转载于:https://www.cnblogs.com/yangzhi/archive/2013/04/11/3576556.html
jQuery.fn和jQuery.prototype区别。相关推荐
- jQuery源码-jQuery.fn.each jQuery.each
先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 $('div').each(function(index, elem){$(this).addClass('red'); ...
- [jQuery] jquery.extend与jquery.fn.extend的区别?
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...
- jquery的$.extend和$.fn.extend作用及区别(—)
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...
- jQuery.fn的作用是什么
转自:http://blog.csdn.net/z69183787/article/details/17766703 jQuery.fn的作用是什么: 在自定义jQuery插件中,会经常见到jQuer ...
- 详解 Jquery extend() 和Jquery.fn.extend()
Jquery extend() API文档上的解释:将一个或者多个对象扩展一个新对象,返回一个新的对象 $.extend([deep],target,obj1,objN) deep:是否深度克隆对象, ...
- jQuery.fn是什么意思?
这里的fn是什么意思? jQuery.fn.jquery #1楼 fn实际上是指jquery prototype . 此行代码在源代码中: jQuery.fn = jQuery.prototype = ...
- jQuery.fn.extend 与 jQuery.extend 用法
1.jQuery.fn.extend 是对jQuery方法进行扩展 demo: jquery 本身并不提供 jQuery.color() 这个方法,如果我们需要对jQuery本身提供的方法进行扩展, ...
- jQuery.extend与jQuery.fn.extend的区别
jQuery.extend 对jQuery对象的扩展,可以理解为静态方法,不需要实例jQuery就可以使用. <script type="text/javascript"&g ...
- jQuery.extend与jQuery.fn.extend的区别分析与实例
jQuery.extend与jQuery.fn.extend都是为jquery开发插件. 不同是的: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQu ...
最新文章
- 【内网穿透】生壳SSH映射 for Linux 使用教程
- Sring boot学习笔记(三)-自带注解定时任务使用
- a commit git 参数是什么意思_深入理解Git - 一切皆commit
- 计算机考上研究生暑假去哪里实习_浅谈化工与计算机行业
- 规划System Center 2012 R2 Operations manager
- 烽火戏诸侯于计算机相关联系,烽火戏诸侯的成语典故
- Stopping filebeat
- SpringAOP和AspectJ
- [转载]jQuery操作Table学习总结
- 前端框架MVVM是什么(整理)
- dwcc怎么设置html默认,Dreamweaver CC 2019如何设置界面首选项?
- 手把手教Python使用微信聊天记录生成词云
- Linux学习-账户管理
- Linux之串口应用
- Android屏幕亮度调节
- java 读取csv文件乱码_java读取csv文件乱码怎么解决
- Python生成二维码脚本
- HCIP --- HDLC和PPP协议
- 神经性脚臭案例整理(一)
- Android-生成二维码工具类
热门文章
- 彻底理解Java的feature模式
- 分布式服务框架 dubbo/dubbox 入门示例(转)
- 【Spark亚太研究院系列丛书】Spark实战高手之路-第一章 构建Spark集群(第二步)(4)...
- photoshop修复面部的皱纹
- 详解Linux交互式shell脚本中创建对话框实例教程
- EV代码签名证书,支持Windows 10预览版和正式版驱动签名
- cocos creator怎么隐藏组件(setVisible)
- 寒假训练,2.25,J-Palindrome Names (回文
- dbms_stats.lock_table_stats对于没有统计信息的表分区同样有效
- Boost 编译链接