Javascript:从对象数组调用函数

Javascript: Calling a function from an array of objects

本文关键字：调用 函数 数组 对象 Javascript      更新时间：2023-09-26

我有一个对象数组，我正在用这些对象构建一个页面对象有一个图像，图像将是可点击的，我想计算每个图像的点击次数。我正在尝试将每个对象的点击值分配给"点击"，然后将"点击"交给 onclick 函数以分别计算点击次数。我不确定这是否有效。

我目前的问题是，当执行 onclick 函数时，该值显示为 NaN。我知道我需要为点击分配一个起始值。我在很多地方都试过了。在对象中，在函数之外的函数中。要么值没有计数，要么我收到错误，因为元素设置为 0在哪里可以分配起始值？

这是数组

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

这就是我构建页面的方式 for （ var i= 0; 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);

}

这是我的点击功能

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

理由不能分配 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 是一种按引用传递还是按值传递语言？

是的。使用一个对象，不要把它写成onClick。太危险了。您可以覆盖它。请改用事件侦听器。

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()});
相关文章：