Getting incorrect values in my javascript project when passing function as callback on event handler

Question

Here I have a just extracted my problematic part of code as it is an object with a clickInfo method that I want to use when testDivbtn in html is clicked​

var product = {
        jsondata:[
        {title:"GearBox", price:80000},
        {title:"Clutch", price:7000}
        ],
    loadInfo:function (event) {
    ​   // This line is printing first product info from the jsondata array​ - just to test
     console.log (this.jsondata[0].title + " " + this.jsondata[0].price);
      }
}

This is simple div that is attached to click handler

$ ("#testDivbtn").click(product.loadInfo); 

Here is html

<div class="col-sm6"><button id="#testDivbtn" type="button" class="btn btn-default">Test Product</button></div>

It is showing error in console - Cannot read property '0' of undefined I have this error at many other places in my app , If any one point the error it will be very helpful.

Answer 1

You need to use bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Ref : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Initially when you use this.jsondata[0].title, here this refers to the <button> element, which doesn't have property .jsondata

$(function() {
  var product = {
    jsondata: [{
      title: "GearBox",
      price: 80000
    }, {
      title: "Clutch",
      price: 7000
    }],
    loadInfo: function(event) {
      console.log(this.jsondata[0].title + " " + this.jsondata[0].price);
    }
  }
  $("#testDivbtn").click(product.loadInfo.bind(product));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm6">
  <button id="testDivbtn" type="button" class="btn btn-default">Test Product</button>
</div>

Polyfill:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
      // Function.prototype don't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Answer 2

There you need to understand few concept here related to use "this" object properly. few methods like bind() -(from ES5 onwards), apply() and call(). Now as I see your code will try to explain this in little detail

Here the button $(“#testDivbtn”) is an object on its own, and you are passing the product.loadInfo method to its click() method as a callback, as it is inside product.loadInfo method will no longer refer to the product object. "this" will now refer to the object where the product.loadInfo method is executed because this is defined in that method. And the object that is invoking product.loadInfo is the button object, product.loadInfo will be executed inside the button object’s click method.

Even though you are calling the loadInfo () method with product.loadInfo() At this point, it should be apparent that when the context changes , when we execute a method on some other object than where the object was originally defined,

the "this" keyword no longer refers to the original object where "this" was originally defined, but it now refers to the object that invokes the method where this was defined.

Solution to fix this when a method is passed as a callback function: Since you really want this.jsondata to refer to the jsondata property on the product object, we can use the Bind (), Apply (), or Call () method to specifically set the value of this.

As above answer suggest to use bind replace all the place like this

    $("#testDivbtn").click (product.loadInfo);

with this

    $("#testDivbtn").click (product.loadInfo.bind (product)); // it will print Gearbox 80000 in console.

There is one question I am linking that here is really good to look for further detail about apply call bind Javascript call() & apply() vs bind()?