2016-10-27 6 views
3

계시 모듈 패턴 내부 외부 변수 불일치

<html><body><button>setSpeed</button> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script> 
 

 
$(document).ready(function(){ 
 
    $('button').on('click', function(){ 
 
    _.setSpeed(); 
 
    console.log('_.slow: ' + _.slow); 
 
    }); 
 
}); 
 

 
var _ = (function(){ 
 
    var slow = 4; 
 
    
 
    function setSpeed(){ 
 
    if (slow == 4) { 
 
     slow = 1; 
 
    } else if (slow == 1){ 
 
     slow = 16; 
 
    } else { 
 
     slow = 4; 
 
    } 
 
    console.log('slow: '+ slow); 
 
    } 
 
    return { slow: slow, setSpeed: setSpeed }; 
 

 
})(); 
 

 
</script></body></html>

느리고 _.slow에 대한 CONSOLE.LOG이 일치하지 않는 이유를 이해하지? 내가 뭘 놓치고 있니?

IIEF에서 var slow와 function setSpeed를 모두 반환하면 일치해야한다고 생각합니다.

답변

1

이 작업을 수행 할 때 :

return { slow: slow, setSpeed: setSpeed }; 

당신은 두 가지 속성, slowsetSpeed와 새로운 객체를 만들 수 있습니다. slow의 값은 var slow에서 할당됩니다. 그것이 원시 타입 (참조 값이 아님)이므로 현재 값 slow (4)의 복사본을 얻게됩니다.

setSpeed를 호출하면 var slow이 1로 변경됩니다. 이는 참조가 아니기 때문에 _.slow에 영향을주지 않습니다.

+0

천천히 내부의 값을 확인하려는 경우 느린 속도의 게터 기능을 추가 할 수 있습니다. 'function getSlow() { return slow; 'return {return {getSlow : getSlow, setSpeed ​​: setSpeed}; " "부분에 getter 함수를 바인딩하거나'slow' 속성을 바인딩 할 수 있습니다. (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/get) –