javascript - 根据confirm()结果创建一个新对象

Question

有人可以帮助我理解为什么这不起作用。这是我的 JS 代码:

function Agent(codename, str, acc, spd, int, lock, cqc, stl, lck) {
    "use strict";
    this.codename = codename;
    this.str = str;
    this.acc = acc;
    this.spd = spd;
    this.int = int;
    this.lock = lock;
    this.cqc = cqc;
    this.stl = stl;
    this.lck = lck;
    this.avg = function () {
        return (this.str + this.acc + this.spd + this.int + this.lock + this.cqc + this.stl + this.lck) / 8;
    };
}

document.getElementById("ace-select").addEventListener("click", function () {
    "use strict";
    var r = confirm("Are you sure you want Ace?");
    if (r === true) {
        var ace = new Agent("Ace", 8, 9, 9, 9, 8, 10, 10, 5);
    }
}, false);

这是我的按钮 HTML:

<button class="btn btn-primary btn-lg btn-border select-color" id="ace-select" type='submit' role="button">Select</button>

当我在 Chrome 中对此进行测试时，单击按钮会按预期显示确认()提示，但单击“确定”不会按预期创建对象。我收到错误:“ Uncaught ReferenceError :ace 未在 :1:1 处定义”

如果我采用完全相同的代码并将其直接放入控制台，那么它就可以正常工作。在本例中，我按原样粘贴对象构造函数，但省略了 EventListener 部分，仅粘贴:

var r = confirm("Are you sure you want Ace?");
        if (r === true) {
            var ace = new Agent("Ace", 8, 9, 9, 9, 8, 10, 10, 5);
        }

和以前一样，确认()框会弹出，当我单击“确定”时，它会按预期计算为 true 并创建我的对象。

我做错了什么，当我将它放在事件监听器中时它不起作用？

Answer 1

问题出在变量作用域上。由于 ace 被声明为匿名函数内部的变量，因此只能由该函数访问。

这就是为什么当您尝试通过控制台(或其他任何地方，例如该函数之外的另一个函数)访问它时会收到错误。

这就是 JavaScript 的工作原理，这里有关于作用域的更多信息:https://www.w3schools.com/js/js_scope.asp

如果您想在本地范围之外使用ace，那么如果您使用不同的设计模式，可以通过多种方法来实现。例如一个揭示模块:https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript (这本书有很多关于 JavaScript 设计模式的精彩且免费的信息，我强烈建议您阅读它)。

另一种方法是简单地尝试创建自定义对象:

AGX = {};
AGX.Learning = {
    createAgent: function(options) {
        console.log(AGX.Learning.agent);
        console.log((options.str + options.acc + options.spd + options.int + options.lock + options.cqc + options.stl + options.lck) / 8);
    }
}

var createAgentOptions = {
    str: 2,
    acc: 5,
    spd: 7,
    int: 2,
    lock: 30,
    cqc: 4,
    stl: 3,
    lck: 29
};
AGX.Learning.agent = 'Ace';
AGX.Learning.createAgent(createAgentOptions);

在上面的示例中，Learning 是一个被添加到父对象 AGX 的对象。从那里，agent 也存储在 Learning 对象中，然后由 createAgent() 函数使用。

我建议您尝试一下，虽然它很基础，但它将帮助您学习 JS 基础知识(JS 中的几乎所有内容都是对象)，然后浏览链接书中的不同设计模式。