Question

在jQuery中，＆＃39; $＆＃39;别名有很多用途。它就像一个函数：

$('#someid')

但您也可以将其作为对象：

$.attr('id', 'hello');

如何创建具有此属性的函数（可以作为自身和方法调用对象）？

修改

此外，有时你可以这样链：

$('id').html('<span>Hello</span>);

如何将对象扩展到此？

Answer 1

函数是JavaScript中的对象，因此您可以像对待任何其他对象一样向函数添加属性。

function $(id) {
    // blah blah
}

$.attr = function (id, attr) {
    // blah blah
}

Answer 2

jQuery是开源的，以下几行是直接从他们的github repo中获取的，以便对之前的答案给出更多说明：

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 );
    },

    // Support: Android <=4.0 only
    // Make sure we trim BOM and NBSP
    rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

    // Matches dashed string for camelizing
    rmsPrefix = /^-ms-/,
    rdashAlpha = /-([a-z])/g,

    // Used by jQuery.camelCase as callback to replace()
    fcamelCase = function( all, letter ) {
        return letter.toUpperCase();
    };

jQuery.fn = jQuery.prototype = {

    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // The default length of a jQuery object is 0
    length: 0,

    toArray: function() {
        return slice.call( this );
    },

它是从中间获取的，因此可以安全地假设jQuery作为对象在代码var jQuery =...中先前已声明，并且还要记住$只是{{1}的简写它们附加到jQuery全局对象。您可能需要时间来研究真棒开源本身以获得更清晰的想法：https://github.com/jquery/jquery

Answer 3

乔如何正确地回答了如何使“功能”像对象一样的问题，所以我再也不用再回答这个问题了。

为了能够链接函数调用（这是问题的第二部分中发生的事情），您调用的函数需要返回一个对象。它看起来像这样：

var func = function() {
    this.func2 = function() {

        return this;
    };

    return this;
};

// then the following code will work:
func().func2();

为了说明它是如何工作的，它等同于这些陈述：

var funcObject = func();
funcObject.func2();

同样重要的是要注意jQuery可能不会返回this，而是一个包装的DOM对象，可以在其上调用attr等各种函数。但它基本上是相同的概念：

$ = function(id) {
    var wrappedDomObject = getWrappedDomObject(id);

    return wrappedDomObject;
}

// somewhere in jquery

function getWrappedDomObject(id) {
    // some code to get the object

    wrappedObject.attr = function(id, value) {
        // some code here

        return this;
    }

    return wrappedObject;
}

因为$函数正在返回一个对象，所以你可以在它返回的任何内容上立即调用attr函数，并且如果有必要，可以继续在该对象上链接函数调用，因为{{1 }}

请记住，我实际上并不确定这是否是jQuery的工作原理，这只是一个说明这个概念的潜在实现。

javascript模拟jQuery语法

3 个答案: