Переменная как функция в то же время в JavaScript

Question

Я действительно хочу реализовать что-то вроде этого.

myVar.myAnotherVar; 
myVar.myMethod(); 
myVar("sample text"); 

и это как JQuery реализовали

jQuery.fn; 
jQuery.ajax(); 
jQuery("#myBtn"); 

Как я могу реализовать что-то вроде JQuery, который держит все на одном пространстве имен? это как-то связано с прототипом? как можно использовать переменную для вызова в качестве функции одновременно?

Спасибо :)

Answer 1

Функции в JavaScript являются объектами, вы можете произвольно добавить свойства к ним так же, как и любой другой объект:

function foo() { 
    // Code for when you call `foo` goes here 
} 
foo.someData = "bar"; 
foo.someFunction = function() { 
    // Code for when you call `foo.someFunction` goes here 
}; 

Что JQuery делает это что-то немного более сложным, и немного необычно, в нескольких способов:

1. jQuery функция (обычно псевдонимами, как $) является просто оболочкой Arou nd вызов функции-конструктора, которая создает новый объект. (Функция вызывается конструктор init.)

2. Они добавили ссылку на эту init функции в prototype собственности в собственности на функции jQuery называется fn. Оба свойства (jQuery.fn и init.prototype) относятся к объекту, который станет прототипом экземпляра при использовании new init.

3. Они имеют также называют тот же объект из jQuery.prototype, даже если jQuery не используется в качестве функции конструктора. Это так, что $() instanceof $ будет true.

Но вам не нужно делать эти вещи только для того, чтобы делать то, что вы описали. Вы можете, конечно, но вам не обязательно.

Если вы хотите, чтобы сделать эти две вещи, основная структура выглядит следующим образом:

var foo = function() { 
    // The public function 
    function foo(args, here) { 
     return new init(args, here); 
    } 

    // The hidden constructor function 
    function init(args, here) { 
     // ...do something with `this`, perhaps 
    } 

    // The object that becomes the prototype of instances created via `new init` 
    foo.fn = foo.prototype = init.prototype = { 
     // An instance-specific function, like jQuery's `css` 
     instanceMethod: function() { 
      // Has access to `this` 
     } 
    }; 

    // A random piece of "static" (not instance-specific) data 
    foo.someData = "bar"; 

    // A "static" (not instance-specific) function, like jQuery's `$.ajax` 
    foo.staticMethod = function() { 
     // Doesn't have (useful) access to `this` 
    }; 

    return foo; 
}();