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中测试时，单击该按钮会按预期显示confirm（）提示，但单击“确定”不会按预期创建我的对象。我得到错误：“未捕获的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);
        }

和以前一样，弹出confirm（）框，当我单击OK时，它会按预期评估为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中几乎所有东西都是一个对象），然后通过链接中的不同设计模式书。

基于confirm（）结果创建新对象

1 个答案: