Question

我想：

实例化JavaScript对象数组，其中对象属性引用对象本身的其他属性，然后
使用数组配置一组按钮的点击事件。

问题（请参阅上面的代码段）：

mymessage和myvalue参数在调用anotherfunction（）时未定义
当点击类myclass*的按钮时x [i] .myaction（）;未定义，因为单击按钮时，我评估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 1

只需使用x.mymessage和x.myvalue

即可

＆＃13;

var x = {
  mymessage: "this is a message", 
  myclass: "myclass", 
  myvalue: 10,
  myaction:  function() {
    anotherfunction(x.mymessage, x.myvalue); 
  }
};
function anotherfunction(m, v) {
  alert(m);
}
$('.'+x.myclass).click(x.myaction)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">Click me</div>

＆＃13;

Answer 2

只需将其更改为以下

即可

＆＃13;

var x = {
  mymessage: "this is a message",
  myclass: "myclass",
  myvalue: 10,
  myaction: function() {
    anotherfunction(x.mymessage, x.myvalue);
  }
};

function anotherfunction(m, v) {
  alert(m);
}

$('.' + x.myclass).click(x.myaction);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
  hi
</div>

＆＃13;

希望有所帮助

Answer 3

出于可重复使用的目的，您实际上应该在对象中使用this，如

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

但是，您应该在事件侦听器的回调中使用适当的上下文调用它，如下所示;

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>

因此，根据这个问题的修改版本，我相信这是一个很好的例子来证明this在对象数组中的可重用性。您可以安全地执行以下操作;

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>

如何在JavaScript对象数组实例化期间引用属性

3 个答案: