Javascript：从对象数组中调用函数

Question

我有一个对象数组，并且正在使用这些objecs构建页面。这些对象都有一个图像，该图像将是可单击的，并且我想计算每个图像的点击次数。 我试图将每个对象的点击值分配给“点击”，然后将“点击”移交给onclick函数以分别计算点击。 我不确定是否可行。

我当前的问题是，在执行onclick函数时，该值显示为NaN。 我知道我需要为点击分配一个初始值。 我在不同的地方尝试过。 在对象中，在函数外部。 值未加计数，或者元素设置为0时出现错误，我可以在哪里分配起始值？

这是数组

var things = 
[
{img : "cat.jpg",
tclicks: "cleo_clicks",
id : "cleo"
},

{img : "shimi.png",
tclicks: "shimi_clicks",
id : "shimi" 
}
]

这就是我为（var i = 0; i <Things.length; i ++）{

var x = document.createElement("IMG");
x.setAttribute("src", things[i].img);
x.setAttribute(tclicks, things[i].clicks);
x.setAttribute("onclick", "countClicks(tclicks)");

document.body.appendChild(x);


}

这是我的onclick函数

function countClicks(clicks){

clicks ++;
console.log(clicks)

}

Answer 1

没有理由您不能在定义对象数组的情况下分配clicks = 0：

var things = [
  {
    img: "cat.jpg",
    tclicks: "cleo_clicks",
    id: "cleo",
    clicks: 0
  },
  {
    img: "shimi.png",
    tclicks: "shimi_clicks",
    id: "shimi",
    clicks: 0 
  }
];

...但这只是问题的一半。

在点击增量功能中：

function countClicks(clicks) {
  clicks++;
  console.log(clicks);
}

...您永远不会影响任何对象的click属性的更改，因为Javascript按值传递函数参数（ https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value ）。

您需要将整个对象传递给函数，并允许它修改属性值：

function countClicks(someObject) {
  someObject.clicks++;
  console.log(someObject.clicks);
}

...这意味着您需要更改函数的调用方式，例如：

x.setAttribute("onclick", "countClicks(things[i])");

注意：以上假设事情数组是全局的，否则您将需要进一步重构。

最后说明，调用JS传递值可以简化一点。 您可以在此处进一步探讨该问题： JavaScript是引用传递还是值传递语言？

Answer 2

是的。 使用一个对象，不要像onClick那样难写。 太危险了 您可以覆盖它。 请改用eventListener。

function CountClicks(config){
    var img     = config.img;
    var tclicks = config.tclicks;
    var id      = config.id;
        var clicks  = 0;
    return{
        countUp: function(){
            clicks++;           
        },
        countDown: function(){
            clicks--;           
        },
        getCount: function(){
            return clicks;
        }
    }
}


x.counter = new CountClicks(things[i]);
x.addEventListener('click', function(){this.counter.countUp()});