问题描述
jQuery
或 $
似乎是一个函数:
typeof $; // "function"
它就像一个:
$('div').removeClass(); // $ constructs a new object with some methods like removeClass
但是当我删除函数括号时它会表现出来像一个对象:
But when I drop the function parentheses it behaves like an object:
$.each(/* parameters */); // $ is an object with some methods like each
我想知道这是怎么回事以及如何将这种行为实现到我自己的函数中。
I'd like to know how this is possible and how I can implement this behaviour to my own functions.
推荐答案
函数也是对象,所以 $ .each
可以用与Object类似的方式定义。
Functions are also objects, so $.each
can be defined in a similar way as an Object.
JavaScript是一种原型语言。对于jQuery,这意味着 $
的每个实例都从 jQuery.prototype
继承方法。
JavaScript is a prototypical language. For jQuery, this means that every instance of $
inherits methods from jQuery.prototype
.
一个非常粗略的演示,以实现类似的行为:
A very rough demo, to achieve the similar behaviour:
(function() { // Closure to not leak local variables to the global scope
function f(a, b) {
//Do something
}
// Prototype. All properties of f.prototype are inherited by instances of f.
// An instance of f can be obtained by: new f, new f(), Object.create(f)
f.prototype.removeClass = function(a) {
return a;
};
function $(a, b) {
return new f(a, b); // <--- "new f" !
}
$.each = function(a) {
alert(a);
};
window.$ = $; // Publish public methods
})();
//Tests (these do not represent jQuery methods):
$.each("Foo"); // Alerts "Foo" (alert defined at $.each)
alert($().removeClass('Blabla'));// Alerts "Blabla"
注释
jQuery的根方法定义如下(仅显示相关部分):
Notes
jQuery's root method is defined as follows (only relevants parts are shown):
(function(win) {
var jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
};
//$.fn = jQuery.fn is a shorthand for defining "jQuery plugins".
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( /* ..parameters.. */ ) {
//.... sets default properties...
}
//....other methods, such as size, get, etc...
//.... other properties, such as selector, length, etc...
};
jQuery.fn.removeClass = function() { // (Actually via jQuery.fn.extend)
// ... method logic...
}; //...lots of other stuff...
win.$ = win.jQuery = jQuery; //Publish method
})(window);
原型
方法的优点是链接方法和属性非常容易。例如:
The advantage of the prototype
method is that it's very easy to chain methods and properties. For example:
$("body").find("div:first").addClass("foo");
实现此功能的方法可能是:
A method to implement this feature could be:
$.fn.find = function(selector) {
...
return $(...);
};
如果您对jQuery的实际实现感兴趣,请查看带注释的源代码:
If you're interested in jQuery's real implementation, have a look at the annotated source code:
- - 构造函数和基本方法的定义。
-
jQuery.fn.extend
是用于。 - 。
- jQuery core - Definitions of the constructor and base methods.
jQuery.fn.extend
is used to addremoveClass
, etc. to jQuery.- jQuery 1.7.1.
这篇关于jQuery如何表现得像一个对象和一个函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!