옛날../자바스크립트

[자바스크립트] 시각적으로 보는 클로저 개념

도로롱주 2018. 1. 4. 18:56




시각적으로 보는 클로저 개념


함수 내에서 선언한 변수를 내부함수에서 접근하면 변수를 물고있는데 이게 클로저 입니다.


클로 저


코드 1 [실행!] [해설!]

코드 2 [실행!][해설!]
1
2
3
4
5
6
7
8
9
10
11
12
function setDIV(nodes) {
    var i;
    for (i = 0; i < nodes.length; i++) {
        nodes[i].onclick = function (i) {
            return function (e) {
                alert(i);
            };
        }(i);
    }
} 
var nodes = document.querySelector("div").children;
setDIV(nodes);
cs
1
2
3
4
5
6
7
8
9
10
11
12
function setDIV(nodes) {
    var i;
    for (i = 0; i < nodes.length; i++) {
        nodes[i].onclick = function (e) {
            alert(i);
        };
    }
}


var nodes = document.querySelector("div").children;
setDIV(nodes);
cs




           
                       
           




접근 제한자 ( public / private / protected / default ) 가 없는 자바스크립트에서 private을 구현해보자


일반적인 생성자 함수( public )

클로저를 이용한 생성자 함수( private )

1
2
3
4
5
6
7
8
9
10
function Person(str) {
    this.pname = str;
    this.getName = function() {
        return this.pname;
    }
}
 
var p1 = new Person('블루');
alert(p1.pname);
alert(p1.getName());
cs

1
2
3
4
5
6
7
8
9
10
function Person(str) {
    var pname = str;
    this.getName = function() {
        return pname;
    }
}
 
var p1 = new Person('블루');
alert(p1.pname);
alert(p1.getName());
cs




저작자표시 (새창열림)