소스1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script>
        var a=1000;
        function func1(a){
           a = 100;  
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1();
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a는 func1함수에 선언해준 a=100이 출력이된다.


소스2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script>
        var a=1000;
        function func1(a){
            function func2(){
                var a = 100;  
            };
            func2();
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1(a);
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a또한 가장위에 선언해준 a=1000이 인자로 들어가서 리턴된 값이 출력이 된다.


소스3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script> 
        var a=1000;
        function func1(){
            var func2 = function(){
            alert("func2");
            };
            return func2;
        };
        
        alert("첫번째 a:"+a);
        a=func1();
        a();
        alert(" 두번째 a:"+a);
        alert(" 세번째 a:"+window.a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과3

소스3이 핵심이다.

참고 사이트

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures

http://blog.javarouka.me/2012/01/javascripts-closure.html


저작자표시 비영리 변경금지

'* Programming > JavaScript' 카테고리의 다른 글

클로저를 이용한 bean 객체 생성  (0) 2016.10.05
THIS  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
Math.floor() / Math.round()  (0) 2016.10.04
*JSON  (0) 2016.10.04

+ Recent posts

티스토리툴바