Question

我是JS的新手，对以下代码感到困惑：

HTML

<button id="btn0">Click Me</button>
<button id="btn1">Click Me</button>
<button id="btn2">Click Me</button>

JS版本1

var test = {
    clk: function () {
        for (var i = 0; i < 3; i++) {
            this.setup(i);
        }
    },
    setup: function (data) {
        var btn = document.getElementById("btn" + data);
        btn.onclick = function () {
            test.show(data);
        }
    },
    show: function (data) {
        alert(data);
    }
}
test.clk();

如果我运行程序并点击3个按钮，那么它们会显示他们保留的每个数据值0, 1, 2

但是，如果我将JS代码更改为：

var test = {
    clk: function () {
        for (var i = 0; i < 3; i++) {
            var btn = document.getElementById("btn" + i);
            btn.onclick = function () {
                test.show(i);
            }
        }
    },
    show: function (data) {
        alert(data);
    }
}
test.clk();

运行并单击3个按钮，然后所有结果都给出3的相同结果？怎么来3的结果？为什么每个人都不给0, 1, 2？ JS版本1与版本2的不同之处是什么？

我来自Java背景，而我所想的只是点击3个按钮时，都会得到2的结果？

javascript函数如何存储参数？

0 个答案: