* Programming/JavaScript

클로져(Closure)

고경a 2016. 10. 5. 20:17

소스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


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