具有自身引用的Javascript函数对象

Question

I can't seem to find an example of what I'm trying to achieve, although I'm sure it has been done many times before...

I want to create an object which will have a set of properties and member functions but that I can also call directly. In the same way the jQuery object allows you to call $("selector") or $.method(...)

Here's a slimmed down version of what I'm trying to achieve :

var foobar = function(param) {
    return "FOO : " + this.lookup(param);
}

foobar.vals = {
    1: "one",
    2: "two"
};

foobar.lookup = function (param) {
    return "BAR : " + this.vals[param];
}

foobar.lookup("1")
// returns "BAR : one"

foobar("1")
// returns error since 'this' points to global scope
// I'd want it to return "FOO : BAR : one"

I've also tried various approaches with function prototype but can't seem to find a method which gives me everything I want...

Answer 1

var foobar = function(param) {
    return "FOO : " + foobar.lookup(param);
}

will return you what you want

To understand this, maybe you should take a look at the basics of JavaScript. What are functions how to instanciate an object and what are objects...

To get something like JQuery this is not very difficult, the JQuery main object is simply a function which also has "static" functions.

to declare a variable as function you do

var myFunc = function(){};

to use the variable and extend it with static stuff you simply assign it via

myFunc.staticFunc = function(){};

this doesn't mean that myFunc.staticFunc can be accessed with this in any instance of myFucn because you didn't add the function to the prototype...

To define a class like object which can be instanciated you also define it as function and then extend the prototype. Prototype is your class definition which is used to construct the object's instance:

myFunc = function(){
  // ctor
  this.lala = "blub";
} ;

myFunc.prototype.objectFunc = function() { 
   return this.lala;
}

now the object myFunc has a function objectFunc. I have to initialize it with new...

alert(new myFunc().objectFunc());

instances can access itself with this...

To do something like jquery you'll have to do some tricks. Your global variable must be a function which returns an instance of your "real" object, which can implement whatever...

Then you can call your variable as if it is a function, eg myFunc()...

Hope the following example makes it more clear how this works: ( can be found on jsfiddle )

(function ($) {

    var myRealObj = function (outId, printText) {
        this.text = printText;
        $("#" + outId).append("<li>" + this.text + "</li>");
    };

    myRealObj.prototype.objectFunc = function () {
        return this.lala
    };

    var myFunc = function (out, txt) {
        return new myRealObj(out, txt);
    };

    myFunc.someFunc = function () {
        myFunc("out", "myFunc.someFunc got called");
    };

    myFunc.static = {};
    myFunc.static.someFunc = function () {
        myFunc("out", "myFunc.static.someFunc got called");
    };


    window.$$ = myFunc;
})($);

$$("out", "test obj function");
$$.someFunc();
$$.static.someFunc();

Answer 2

You could add:

foobar = foobar.bind(foobar);

to make the variable refer to a bound version of the function. Any call to the (updated) "foobar" would have this bound to the original function object. You'd also have to mirror the properties if you wanted to get at them directly, which is sort-of a mess.

In the jQuery implementation, there's a separate internal function that handles the basic routing of the master $() function.

Note also that the "global" $.whatever() functions don't really have much to do with the set of methods supported by jQuery instances (objects returned from the $() function). The $ object just serves as a namespace so that those global utilities don't pollute the global (window) namespace.

Answer 3

声明var foobar = function(param) {...在全球范围内所以this将永远是一个window