Is there another way to pass an object reference to an javascript anonymous function?

Question

the html

<input type="text" value="teste" id="1" />

the javascript

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        var ref = this;
        $("#1").keydown(function (event) {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        })
    }
}

var obj = new classe();
obj.setup();

I was wondering if is possible to pass this into the nested function without having to save it to a local variable ref inside the parent function.

test code on: http://jsfiddle.net/7zorgou0/1/

I think you want to put the var ref = this line above this.setup = function — MDEV
– MDEV, Commented Aug 8, 2014 at 13:16
There are undoubtedly other ways, but none as simple and (AFAIK) widely used as the method above. My only change, as noted, would be creating the local variable in the top level of your object scope. (Or of course use the function(){}.bind(this) method) — MDEV
– MDEV, Commented Aug 8, 2014 at 13:21

Akash · Accepted Answer · 2014-08-12 05:38:16Z

There are more than one ways for this. You can instead create an immediately invoked function expression and pass this in there. But all of these methods are based around the same principle of closure.

Problem is, this variable is whatever the method is called upon. If you write obj.method(), then obj is the value of this for this execution.

Now, the inner method is declared as an event handler and not being called by you. It will be called by system when the event occurs. You can never be sure what object will be used for calling the method.

So if you want to reference outer this inside this handler, better save it as a local variable. The inner function will act as closure upon it and the variable will be accessible easily.

BTW, the IIFE variation which I wrote about above:

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        (function(ref){
            $("#1").keydown(function (event) {
                if (event.keyCode == 13) {
                    $(this).attr("value", ref.nome);
                }
            })
        })(this);
    }
}

Derek 朕會功夫 · Accepted Answer · 2014-08-12 05:48:48Z

0

You can actually achieve that in ECMAScript 6!

class classe() {                           //Real class definition in JS!
    constructor(){
        this.nome = "rodrigo";
    }
    setup() {
        $("#1").keydown((event) => {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        })
    }
}

var obj = new classe();
obj.setup();

The this won't change if the () => {} syntax is used.

Meanwhile in ES5 you can use .bind:

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        var ref = this;
        $("#1").keydown(function (event) {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        }.bind(this));
    };
}

var obj = new classe();
obj.setup();

edited Aug 12, 2014 at 5:48

answered Aug 12, 2014 at 5:42

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Collectives™ on Stack Overflow

Is there another way to pass an object reference to an javascript anonymous function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related