함수에서 전역 변수가 정의되지 않았습니다.

전역 변수 mouseX, mouseY를 함수 내부의 이벤트 리스너에 할당하려고합니다. 다른 함수에서 변수를 사용하려고하면 다시 정의되지 않습니다.함수에서 전역 변수가 정의되지 않았습니다.

할당 된 변수의 범위에는 문제가있을 수 있지만 알아낼 수는 없으므로 작성한 간단한 테스트 코드는 문제를 재현하지 않습니다.

이 문제의 원인은 무엇입니까?

자바 스크립트 :이 루프는 한 번만 실행중인 :

var mouseX, mouseY; 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var bars = []; 
for(var i = 0; i < 30; i++) 
    bars[i] = new Bar(ctx, 100+i*10, canvas.height, 5, 150); 

for(var i = 0; i < bars.length; i++){ 
    bars[i].checkMouse(); 
    bars[i].display(); 
} 

function Bar(ct, x, y, w, h){ 

    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.y -= this.h; 

    this.display = function() { 
    ct.rect(this.x, this.y, this.w, this.h); 
    ct.fill(); 
    } 
    this.checkMouse = function() { 
    //if(mouseX >= this.x && mouseX <= this.x + this.w){ 
    //this.y = mouseY; this.h = height-mouseY; 
    console.log(mouseX); //////mouseX is undefined? 
    //} 
    } 
} 

function getMouse(event) { 
    mouseX = event.offsetX; 
    mouseY = event.offsetY; 
    var coords = "mouseX: " + mouseX + ", mouseY: " + mouseY; 
    document.getElementById('display').innerHTML = coords; 
}

HTML :

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    canvas{ 
     background-color: #e6e6e6; 
     position:relative; 
    } 
</style> 
</head> 
<body> 
<div id="display">&nbsp</div> 
<canvas onmousemove="getMouse(event)" id="myCanvas" width="500"  height="200"> 
<script src="myscript.js"></script> 
</body> 
</html>

출처

2016-06-08 oraz

this와 같이 mouseX를 전달 this.checkMouse = function (mouseX) {// – Bugfixer

이것은 OP의 질문에 대한 답변이 아닙니다. –

'getMouse'를 호출 할 때까지'mouseX'와'mouseY'를 설정하지 않고 이벤트가 실행되기 전에'bars [i] .checkMouse();'* 만 호출하면됩니다. – h2ooooooo

h2oooooo는 지적

for(var i = 0; i < bars.length; i++){ 
bars[i].checkMouse(); 
bars[i].display(); 
}

처럼 작동하도록되어 메인 루프. getMouse() 함수에 복사하면 해결됩니다.

출처

2016-06-08 07:31:21 oraz

이 경우 범위 지정에는 문제가 없지만 코드 조각 실행 순서에는 문제가 있습니다.

완전히로드되면 스크립트 파일이 실행됩니다. 따라서 모든 정의, 객체 생성 및 예제에서 작동하지 않는 메소드를 호출합니다.

mouseX 및 mouseY이 초기화되는 함수는 mouseover 캔버스의 이벤트에서 실행되고 나중에 실행됩니다.

그래서 전체적으로 : 메소드가 실행되면 변수는 나중에 실행되는 함수에서 초기화되기 때문에 초기화되지 않습니다.

가장 좋은 생각은 getMouse 함수의 실행에 문제가있는 메서드 실행을 연결하는 것입니다.

특히 이러한 경쟁 조건을 만들 때 전역 상태에 의존하는 것은 매우 나쁜 스타일입니다. 문제가 생기고 프로젝트가 성장할 때 거의 유지할 수 없기 때문입니다.

출처

2016-06-08 08:06:10 DevWurm

함수에서 전역 변수가 정의되지 않았습니다.

답변

관련 문제