Refer to javascript function from within itself

Consider this piece of code

var crazy = function() {
    console.log(this);
    console.log(this.isCrazy); // wrong.
}
crazy.isCrazy = 'totally';
crazy();
// ouput =>
// DOMWindow
// undefined

From inside crazy() 'this' refers to the window, which I guess makes sense because normally you'd want this to refer to the object the function is attached to, but how can I get the function to refer to itself, and access a property set on itself?

Answer:

Don't use arguments.callee, just use a named function.

"Note: You should avoid using arguments.callee() and just give every function (expression) a name." via MDN article on arguments.callee

I think you are asking for arguments.callee, but it's deprecated now.

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/arguments/callee

var crazy = function() {
    console.log(this);
    console.log(arguments.callee.isCrazy); // right.
}
crazy.isCrazy = 'totally';
crazy();
// ouput =>
// DOMWindow
// totally

As rfw said, this is the most straight forward way to go if the function has one single name:

var crazy = function() {
    console.log(crazy);
    console.log(crazy.isCrazy);
};

crazy.isCrazy = 'totally';
crazy();

In case it may have different names, or you wanted to pass it around, it must be wrapped in a closure:

var crazy = (function(){
    var that = function() {
        console.log(that);
        console.log(that.isCrazy);
    };
    return that;
})();

crazy.isCrazy = 'totally';
crazy();

Bind the function to itself (taking a hint from answers by @ArunPJohny and @BudgieInWA):

crazy = crazy.bind(crazy);

This will give you access from the function to its properties via this.

> crazy()
function () {
    console.log(this);
    console.log(this.isCrazy); // works now
}

This seems like a better solution than the accepted answer, which uses the callee feature which is deprecated and doesn't work in strict mode.

You could also now have the function call itself recursively with this() were you so inclined.

We will call this self-thisifying. Write a little utility function:

function selfthisify(fn) { return fn.bind(fn); }
crazy = selfthisify(crazy);
crazy();

Or, if you prefer more "semantic" names, you could call it accessOwnProps.

If you're a syntactic sugar type of person, you could add a selfthisify property to the Function prototype:

Object.defineProperty(Function.prototype, 'selfthisify', {
    get: function() { return this.bind(this); }
});

Now you can say

crazy.selfthisify();

You have to give it its own name, so:

var crazy = function() {
    console.log(crazy);
    console.log(crazy.isCrazy);
}
crazy.isCrazy = 'totally';
crazy();

The variable this is only applicable in the scope of an object, for instance, if you invoked your version of the crazy function with crazy.call(crazy), it will call the function in the context of the function crazy and all would be well.

This has to deal with the scope of the function crazy. If can pass any scope to a function using the function call().

Instead of

crazy();

Use

crazy.call(crazy);

For details refer
http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

Refer to javascript function from within itself

Related

Recent Posts