jQuery의 클로저/범위 지정 문제

Question

이 패턴이 너무 자주 발생합니다.
누군가가 image1 만 얻는 정식 방법을 제공 할 수 있습니까? 예 2를 보면 작동합니다.하지만 그 이유를 이해하지 못합니다. 왜 작동합니까 - - 또는이 그냥

$(document).ready(function() { 
    $("#prev, #next").click(function() { 
    var mainImage = $("#image1"); 
    if (mainImage.css("visibility")=="hidden") { 
     $(mainImage.css("visibility","visible"); 
     return; 
    } 
    var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]); 
    var newNumber = ($(this).attr("id")=="next")?currentNumber+1:currentNumber-1; 
    var testImage = new Image(); 
    testImage.onload=function() { 
     var img = $("#image1"); 
     img.attr("src",this.src); 
     img.css("visibility","visible"); 
    } 
    testImage.onerror=function() { 
     $("#image1").css("visibility","hidden"); 
    } 
    testImage.src="gallery/"+newNumber+".jpg"; 
    return false; 
    }); 
}); 

---

은 폐쇄를 시도하는이 특정 상황에 대한 설명이 나는

이

초기 코드가 그물 :에 폐쇄 물건을 읽고, 감사합니다 범위 지정 문제?

$(document).ready(function() { 
    $("#prev, #next").click(function() { 
    var mainImage = $("#image1"); // this should be local to the click function 
    if (mainImage.css("visibility")=="hidden") { 
     $(mainImage.css("visibility","visible"); 
     return; 
    } 
    var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]); 
    var newNumber = ($(this).attr("id")=="next")?currentNumber+1:currentNumber-1; 
    var testImage = new Image(); 
    testImage.onload=function() { 
     mainImage.attr("src",this.src); // how come mainImage is available here? 
     mainImage.css("visibility","visible"); 
    } 
    testImage.onerror=function() { 
     mainImage.css("visibility","hidden");// how come mainImage is available here? 
    } 
    testImage.src="gallery/"+newNumber+".jpg"; 
    return false; 
    }); 
}); 

Answer 1

글로벌가되도록 VAR로 정의되며,이 정의 된 함수의 범위 와 '하위 기능 "(로컬 기능) 라이브 바르 이 함수 내에서.

예를 들어

:

function fun1(){ 
    var var1 = "Defined in fun1. "; 
    function fun2(){ 
     var var2 = "Defined in fun2. "; 
     alert(var1); //Alerts "Defined in fun1 " 
     function fun3(){ 
      alert(var1 + var2); //Alerts "Defined in fun1. Defined in fun2"; 
     } 
    } 
    alert(var2); //Alerts 'undefined' (fun1 doesn't know var2 exists) 
} 

그리고 같은 코드에서 일어나고있다. 귀하의 변수 은 모든 지역 기능에 '생존'합니다. 바인드 된 함수는 이름이 없거나 다르게 선언 된 경우에도 로컬 함수임을 잊지 마십시오.

희망이 도움이됩니다. 건배

Answer 2

mainImage가 그 모든 기능 자바 스크립트

Answer 3

JavaScript 유효 범위 지정이 작동하는 방식입니다. 다음을보십시오 :

var func1 = function(){ 
    console.log(i + 2); 
}; 

var myFunc = function(){ 
    var i = 1; 
    var func2 = function(){ 
     console.log(i + 2); 
    }; 
    func2(); // output 3 
    func1(); // ReferenceError: i is not defined 
};