Question

我想知道JQuery如何使用“$”作为返回新实例和实例本身的函数。我想情况并非如此，但我的意思是，我们可以使用$(element).method而不使用括号$.ajax（.ajax仍然是方法）。

编辑： 我想我错过了。我知道对象在JavaScript中是如何工作的，而我的问题与此无关。 JQuery允许我们使用$而不使用关键字new。它有一个自动返回新实例的函数。所以我的问题是它如何使用$作为实现新对象和对象本身的函数。假设我们有

(function() {

var jQ = function (arg){

    this.own = arg;

};

jQ.prototype = {

    foo : function (){

        alert("Foo");

    },

    bar : function (){

        alert("Bar");

    }

};

window.jQ = window.$ = jQ;

return jQ;

}（））; 在这个例子中，如果我想使用我的对象，我必须通过关键词new。那么JQuery如何避免这一步呢？

Answer 1

函数是javascript中的对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function您可以查看以下代码：

var f = function () { alert(1); };
f.func1 = function () { alert(2); };
f.func2 = function () { alert(3); };

您可以致电f()，f.func1()等等......

Answer 2

这不是jQuery。在JavaScript中，函数是对象。

Answer 3

在$(element).method的情况下，您将参数element传递给jQuery函数，在$.ajax调用中，您调用$内的ajax函数jQuery对象。在这两种情况下，我们都在谈论相同的代码，但我们正在以两种不同的方式使用它。

查看jQuery的原始源代码，这应该有助于将其可视化：https://code.jquery.com/jquery-2.1.1.js 注意：重复使用的jQuery函数在页面底部显示别名。

Answer 4

请记住，在JavaScript中，函数是对象。因此，使用您在问题中调出的特定函数，您可以像这样创建它们：

var $ = function(selector) {
    ...
};

$.ajax = function(url) {
    ...
};

编辑：要回复您编辑/澄清的问题，您不必使用原型来在javascript中创建构造函数。请记住，所有构造函数都在做的是返回一个对象 - 这里等同于你的原型代码，但不必使用new运算符来实例化对象：

(function() {

var jQ = function (arg){

    return {
        own: arg,
        foo: function (){
                 alert("Foo");
             },
        bar: function (){
                 alert("Bar");
            }
    }

};

window.jQ = window.$ = jQ;

return jQ;
}());

我相信Douglas Crockford实际上更喜欢这种风格，因为忘记使用new关键字不会引发错误，但你会得到一些非常意外的行为。

Answer 5

JQuery允许我们在没有关键词new的情况下使用$。它有一个自动返回新实例的函数。

这里没有什么神奇之处。 jQuery函数只返回另一个构造函数（source）的实例：

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
},

代码中唯一的魔法（示例中未显示）是jQuery.fn.init.prototype = jQuery.prototype。但是jQuery.fn.init is a different function than jQuery。

应用于您的示例：

var jQ = function (arg){
    return new jQ.prototype.init(arg);
};

jQ.prototype = {

    init: function(arg) {
        this.own = arg;
    },

    // ...

};

jQ.prototype.init.prototype = jQ.prototype;

使用变量作为函数和对象实例

5 个答案: