javascript - object in javascript reference by this but not when using event listener

Question

Why is it that the this is not referencing the object, myObject?

When I do console.log(this) returns undefined... Why?

Javascript:

var myObject = {
                    
    product: document.getElementById('product'),
    
    button: document.getElementById('btn'),
    
    productView: function(){
        if (this.product.className === 'grid') {
            this.product.className = 'list';
        } else {
            this.product.className = 'grid';
        }
    },
    
    clickHandler: function(e) {
        var o = this;
        console.log(this);
        o.productView();
        e.preventDefault();
    },
    
    init: function (){
        this.button.addEventListener('click', this.clickHandler, false);
    }
};

myObject.init();​

demo

Many Thanks

Answer 1

The .this in your handler method for the event refers to the object being clicked. Use something like var self = myObject; and then use self instead of this.

Answer 2

You need to bind this to the correct context of you object. I common way to achieve this is to assign a reference of the local this to another variable inside your init function:

init: function (){
    var that = this;
    this.button.addEventListener('click', function(e) {that.clickHandler(e)}, false);
}

Answer 3

Calling this.clickHandler() there would set this to the object. However, you're merely passing the function to addEventListener, and the browser will set a custom this value when it calls the function.

If you want to bind the current this value, use this.clickHandler.bind(this). The function returned by bind will also receive the "wrong" this value, but it calls clickHandler with the bound, correct this value.

Answer 4

First just use 'this' for your click handler...

clickHandler: function(e) {
    console.log(this);
    this.productView();
    e.preventDefault();
}

Then you have a few options. Here are two...

Option A:

init: function (){
    var o = this;
    this.button.addEventListener('click', function(e){
        o.clickHandler(e);
    }, false);
}

Option B:

init: function (){
    this.button.addEventListener('click', this.clickHandler.bind(this), false);
}

I asked a related question about which of these options is preferrable: When should a JavaScript reference object be used versus .bind()?