can't access variable in another function inside object literal

Question

I have following code of javascript

var Obj = {
    init: function () {
        this.over = $('<div />').addClass('over');
        $('body').append(this.over);
        $('.click').on('click', this.show);
    },
    show: function () {
        console.log(this.over);
    }
}

Obj.init();

When this does is when user clicks a .click link then it triggers show function and logs out the dom element created in init function. But the problem is then it logs out undefined. Why? How to solve it?

IdanHen · Accepted Answer · 2013-03-21 07:30:28Z

4

try this :

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', this.show);
},

show: function () {
    // here the 'this' is the button , not the obj object ..
    console.log($('.over'));
}
}

Obj.init();

another option :

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    var that = this;
    $('.click').on('click', function(e){
       that.show.call(that, e); // calling the show function with call, causing 'this' to be obj
    });
},

 // 'this' is the obj
show: function (e) {
    console.log(this.over);
}
}

Obj.init();

answered Mar 21, 2013 at 7:30

IdanHen

2663 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IdanHen Over a year ago

hope it helps , and solves your problem , if you need help understand something , let me know.

Om3ga Over a year ago

Thank you for you help. One more thing can you look at this jsfiddle.net/SQGsZ/1 . Why me is not logged out?

IdanHen Over a year ago

Obj.me; => Obj.me(); // in line 9 !

Sandeep · Accepted Answer · 2013-03-21 07:33:53Z

2

The problem here is the scope of that this (Obj).

Use the following code to solve your problem.

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', $.proxy(this.show, this));
},

show: function () {
    console.log(this.over);
}
};

Obj.init();

learn more about jQuery.proxy

answered Mar 21, 2013 at 7:33

Sandeep

2,12121 silver badges35 bronze badges

Comments

Spencer Lockhart · Accepted Answer · 2013-03-21 07:38:33Z

1

Because jQuery injects the DOM element that was clicked on into 'this' as opposed to the 'Obj' object. One solution is closure:

var Obj = {
  init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', this.show());
  },

  show: function () {
    var self = this;
    return function () {
        console.log("over:", self.over);
    }
  }
}
Obj.init();

answered Mar 21, 2013 at 7:38

Spencer Lockhart

1,1747 silver badges7 bronze badges

Comments

Quentin · Accepted Answer · 2013-03-21 07:35:07Z

0

You pass the function stored in this.show to on. When it gets called, it is not called in the context of Obj so this is not Obj.

You need to create a new function which isn't dependent on being called in the context of Obj.

The easiest way to do this is with bind:

$('.click').on('click', this.show.bind(this));

But this has limited browser support.

You can also use a closure:

var myObj = this;
var show = function () {
    myObj.show()
}
$('.click').on('click', show);

answered Mar 21, 2013 at 7:35

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

ganmor · Accepted Answer · 2013-03-21 07:38:18Z

0

When binding a function to an event with jquery, the context in which this function is called is the dom object that has been clicked.

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    var that = this;
    $('.click').on('click', function(){ 
        // console.log( this ) will log the dom object
        that.show.call( that ) 
     } );
},

show: function () {
    console.log(this.over);
}
}

Obj.init();

answered Mar 21, 2013 at 7:38

ganmor

1951 silver badge6 bronze badges

Collectives™ on Stack Overflow

can't access variable in another function inside object literal

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related