confirm() 결과를 기반으로 새 객체 만들기

Question

왜 이것이 작동하지 않는지 이해할 수 있습니까? OK 프롬프트 내가 크롬이를 테스트 할 때

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

이 버튼을 클릭하면 확인을 (가 나타납니다) 예상대로하지만 클릭 : 여기

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입니다 : 여기 내 JS 코드 예상대로 내 개체를 만들지 않습니다. 나는 오류가 발생한다 : "Uncaught 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 예상대로 내 개체가 만들어집니다.

내가 이벤트 리스너 내부에있을 때 작동하지 않는다고 잘못 생각합니까?

Answer 1

문제는 가변 범위입니다. ace은 익명 함수 내에서 변수로 선언되기 때문에 해당 함수에서만 액세스 할 수 있습니다.

콘솔을 통해 (또는 그 기능 밖의 다른 기능과 같은 다른 곳에서는) 액세스하려고하면 오류가 발생합니다. 당신은 로컬 범위의 ace 외부를 사용하려는 경우 다른를 사용하는 경우 당신이 그것에 대해 갈 수있는 몇 가지 방법이 https://www.w3schools.com/js/js_scope.asp

입니다 :

이

자바 스크립트가 어떻게 작동하는지 그냥 여기 범위에 대한 자세한 내용은 거기에있다 디자인 패턴. 예를 들어 계시 모듈 : 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에 추가되는 객체입니다. 거기에서 은 Learning 객체에도 저장되며, createAgent() 함수에 의해 사용됩니다.

JS 기본 (JS의 거의 모든 것이 대상)을 배우고 링크 된 책의 다른 디자인 패턴을 살펴 보는 것이 도움이 될 것 같지만 기본으로 사용하는 것이 좋습니다.