Roberto Vanoli Roberto Vanoli - 14 days ago 5
Javascript Question

How to refer to properties during instantiation of JavaScript array of objects

I want to:


  1. instantiate a JavaScript array of objects, where objects properties refer to other properties of the object itself, and then

  2. use the array to configure click event of a set of buttons.



problems (pls see snippet above):


  1. mymessage and myvalue parameters are undefined when anotherfunction() is called

  2. when a button of class
    myclass*
    is clicked x[i].myaction(); is undefined because at the time the button is clicked, i evaluates 2





var x = [{
mymessage: "this is message1",
myclass: "myclass1",
myvalue: 10,
myaction: function() {
var res = anotherfunction(mymessage, myvalue);
//do something with res
}
}, {
mymessage: "this is message2",
myclass: "myclass2",
myvalue: 20,
myaction: function() {
res = anotherfunction(mymessage, myvalue);
//do something else with res
}
}];

function anotherfunction(m, v) {
alert(m);
return v;
}
for (var i = 0, len = x.length; i < len; i++) {
$('.' + x[i].myclass).click(function() {
alert(i);
x[i].myaction();
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass1">Click me1</div>
<div class="myclass2">Click me2</div>




Answer

For re-usability purposes you should in fact use this in the object like

myaction:  function() {
    anotherfunction(this.mymessage, this.myvalue); 
  }

However you should invoke it with the proper context in the callback of the event listener as follows;

var x = {
  mymessage: "this is a message", 
  myclass: "myclass", 
  myvalue: 10,
  myaction:  function() {
    anotherfunction(this.mymessage, this.myvalue); 
  }
};
function anotherfunction(m, v) {
  alert(m);
}
$('.'+x.myclass).click(function(e){x.myaction()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">Click me</div>

So as per the modified version of this question, I believe it's a very good example to demonstrate the re-usability of the this in the array of objects. You can safely do as follows;

var x = [{
  mymessage: "this is message1",
  myclass: "myclass1",
  myvalue: 10,
  myaction: function() {
    var res = anotherfunction(this.mymessage, this.myvalue);
    //do something with res
  }
}, {
  mymessage: "this is message2",
  myclass: "myclass2",
  myvalue: 20,
  myaction: function() {
    res = anotherfunction(this.mymessage, this.myvalue);
    //do something else with res
  }
}];

function anotherfunction(m, v) {
  alert(m);
  return v;
}
for (var i = 0, len = x.length; i < len; i++) {
  (function(j){
     $('.' + x[j].myclass).click(function(e) {
                                   alert(j);
                                   x[j].myaction();
                                 });
   })(i);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass1">Click me1</div>
<div class="myclass2">Click me2</div>