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

You can use the call method

var crazy = function() {
    console.log(this);
    console.log(this.isCrazy);
}
crazy.isCrazy = 'totally';
crazy.call(crazy);
// calls crazy using crazy as the target, instead of window:
// functionToCall.call(objectToUseForThis);

Though if your function only ever has one name, you can do this:

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

Easiest way to make the function itself available in its body is to do var crazy = function crazy2() { crazy2(); }, it's okay for crazy and crazy2 to have the same name since the first occurrence is the name in the outer scope and the second is the name in the function body.

Or simply do function crazy() { crazy(); } which will define crazy in both scopes.

> how can I get the function to refer to > itself?

The idea of 'itself' does not exist with functions. What you need is an object and not just a function. An object has knowledge of itself available through the keyword 'this'. Within a function, 'this' points to the global object - in this case the window object. But if you use your function as a constructor function to create an object (using the new operator) then the object's 'this' pointer will point to the object itself.

i.e this points to the object if you write:

var anObject = new crazy();

So you can re-write your code as follows:

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

var anObject = new crazy(); //create an object
anObject.isCrazy = 'totally'; //add a new property to the object
anObject.printMe(); //now print

In case you wish to add the property before the object is created, then you have to add the property to the function's prototype as follows:

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

crazy.prototype.isCrazy = 'totally'; //add the property to the function's prototype
var anObject = new crazy(); //invoke the constructor

See more on my blog for a detailed explanation of these concepts with code-samples.

Are you actually trying to create an object 'class'?

function crazy(crazyState) {
   this.isCrazy = crazyState;
   console.log(this);
   console.log(this.isCrazy);
}
crazy.prototype.alertMe = function() { alert('I am '+ this.isCrazy +' crazy.'); }

var crazyObj = new crazy('totally');
crazyObj.alertMe();

crazyObj.isCrazy = 'not';
crazyObj.alertMe();

Funny that you should ask, mate. I just went through this same issue for a different purpose. The quick version of the final code is:

$a = function() {};

$ = function() {
    if (!(this instanceof $)) {
        return new $();
    }

    this.name = "levi";

    return this;
};

//helper function
var log = function(message) {
    document.write((message ? message : '') + "<br/>");
};

log("$().name == window.name: " + ($().name == window.name)); //false
log("$().name: " + $().name); //levi
log("window.name: " + window.name); //result

log();

log("$a instanceof $: " + ($a instanceof $)); //false
log("typeof $a: " + (typeof $a)); //function
log("typeof $: " + (typeof $)); //function

The critical piece:

    if (!(this instanceof $)) {
        return new $();
    }

If this isn't pointing to an object of the right type, then it makes a new one, which will properly scope this. The rest of the code is just there for verification that it does indeed work as intended.

In order to make you code to work follow below

        function crazy_object (crazy) {
          this.isCrazy = crazy
        }
        
        var create_crazy = new crazy_object('hello') //creating object
        
        console.log(create_crazy); //=> { isCrazy = 'hello' }
        
        var crazy = function() {
            console.log(this); //=> { isCrazy = 'totally' }
            console.log(this.isCrazy); //=> 'totally'
        }
        
        create_crazy.isCrazy = 'totally'; //=> isCrazy = 'totally'
        //below we pass the created object in function crazy.
        //And doing that we can use the keywork `this` and refer to the object
        crazy.call(create_crazy, null);

> Using the call and apply method we can pass to a function a > property,and in that function we can use the property with the keyword this

For example:

function speak (message) {
  console.log(`A person with name ${this.name} say ${message}`);
}

speak.call({ name: 'Roland' }, 'Javascript is awesome');

To use it with property:

function speak (message) {
  console.log(`A person with name ${this.name} say ${message}`);
}
   
var name = 'Roland'

speak.call({ name }, 'Javascript is awesome');