根據confirm（）的結果創建一個新的對象

有人可以幫我理解爲什麼這不起作用。這裏是我的JS代碼：根據confirm（）的結果創建一個新的對象

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中，點擊該按鈕會彈出確認（）提示的預期，但點擊OK不會按預期創建我的對象。我得到的錯誤：「未捕獲的ReferenceError：王牌沒有定義在：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，我的對象被創建。

我在做什麼錯誤，它不會工作，當我有它在事件監聽器內？

來源

2017-04-15 AGx-07_162

如果我應該以完全不同的方式完成此操作，請隨時提供建議。我這樣做的目的是爲了獲得編寫代碼的經驗，並且我完全期望找到需要解決的問題，我很清楚，學習最佳實踐將成爲其中的一部分。 –

我認爲錯誤不在聲明中。你在任何地方打電話給王牌嗎？王牌的範圍僅限於其他地方。 – TypedSource

'ace'的範圍是它所在的'function'，**不是** if語句。你可以在if語句後面添加'console.log（ace）'來測試。 – Optimae

問題在於變量作用域。由於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都是對象），然後通過鏈接書中的不同設計模式。

來源

2017-04-15 02:21:44 Optimae

你知道嗎，我甚至沒有考慮範圍。你是絕對正確的。我將在未來繼續保持這一點。非常感謝！ –

高興地幫助:)。 – Optimae

根據confirm（）的結果創建一個新的對象

回答

相關問題