jQuery.fn和jQuery.prototype区别介绍
更新时间:2013年10月05日 15:24:39 作者:
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 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
发现这里有个东西很难理解。
这里的 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
您可能感兴趣的文章:
- js中继承的几种用法总结(apply,call,prototype)
- js中的hasOwnProperty和isPrototypeOf方法使用实例
- js中prototype用法详细介绍
- JavaScript prototype 使用介绍
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
- Javascript中Array.prototype.map()详解
- JavaScript中的prototype使用说明
- 不错的一篇关于javascript-prototype继承
- 找到了一篇jQuery与Prototype并存的冲突的解决方法
- prototype与__proto__区别详细介绍
相关文章
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解2016-05-05jquery判断checkbox是否选中及改变checkbox状态的实现方法
下面小编就为大家带来一篇jquery判断checkbox是否选中及改变checkbox状态的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
这篇文章主要介绍了jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法,涉及jQuery针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-03-03
最新评论