본문 바로가기
매일코딩/자바스크립트 개념

[생활코딩 함수 ] 클로저 3

by 인생여희 2017. 6. 1.
반응형

1

<HTML>

<HEAD>

<TITLE> closure</TITLE>

</HEAD>

<script>


//내부함수가 외부함수에 접근 할 수 있다.

//내부함수는 외부함수의 지역변수에 접근할 수 있다.



function outter(){

var name = 'kang';

function inner(){

alert(name)

}

inner();


}


outter();

</script>

<BODY>


</BODY>

</HTML>



2
<HTML>
<HEAD>
<TITLE> closure</TITLE>
</HEAD>
<script>

//내부함수가 외부함수에 접근 할 수 있다.
//내부함수는 외부함수의 지역변수에 접근할 수 있다.


//외부함수
function outter(){
var name = 'kang';
return function inner(){
alert(name)
}


}

inner = outter();
inner();

//내부함수는 외부함수의 지역변수에 접근할 수 있다.
// 외부함수의 실행이 끝나서 외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할 수 있다.
// 26행에서 함수 outter를 호출
// 그 결과가 inner에 담긴다.
//그리고 outter 함수는 종료된다. 지역변수도 소멸되어댜 한다.
// 하지만 inner() 함수를 실행 했을 때 kang이 출력된 것은 외부함수의 지역변수가 소멸되지 않았다는 것을 의미한다.
// 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성이 클로저다.

</script>
<BODY>

</BODY>
</HTML>


3.

<HTML>
<HEAD>
<TITLE> closure</TITLE>
</HEAD>
<script>

function movie(title){

return {
get_title : function(){ return title;},
set_title:  function(_title){title = _title}
}


}


a = movie('a_movie');
b = movie('b_movie');
alert(a.get_title());
alert(b.get_title());
a.set_title('change-movie-title');


alert(a.get_title());
alert(b.get_title());


//1.클로저는 객체의 메소드에서도 사용할 수 있다. 
//위의 예제는 함수의 리턴값으로 객체를 반환하고 있다.
//이 객체는 메소드 get_title,set_title을 가지고 있다.
//이 메소드들은 외부 함수인 factory-movie의 인자값으로 전달된 지역변수 title을 사용하고 있다.


//2.동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.

//3.하지만 똑같은 외부함수 factory-movie의를 공유하고 있는 a와 b의 get_title의 결과는 서로 다르다.
//그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 a와 b는 서로 완전히 독립된 객체가 된다.

//4.factory-movie의  지역변수  title은 2행에서 정의된 객체의 메소드에서만 접근할 수 있는 값이다.
//이말은 title의 값을 읽고 수정할수 있는 것은 factory-movie를 통해서 만들어진 객체 뿐이라는 의미다.
//js는 기본적으로 private 한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 private한 속성을 사용할 수 있게 된다.

//5.참고 Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다. 이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다. 
//자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다.

</script>
<BODY>

</BODY>
</HTML>


4.
<HTML>
<HEAD>
<TITLE> hamsoo</TITLE>
</HEAD>
<script>

//var arr = []
//for(var i = 0; i < 5; i++){
//   arr[i] = function(){
//        return i;
//   }
// }
// for(var index in arr) {
//    console.log(arr[index]());
// }




var arr = []


for(var i = 0; i < 5; i++){

    arr[i] = function(id) {
return function(){ return id;}
}(i);
}


for(var index in arr) {
    console.log(arr[index]());
}

</script>
<BODY>

</BODY>
</HTML>


5.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<script>

var arr = []


console.log("START");


for(var i = 0; i < 5; i++){

console.log("A");

arr[i] = function(){

console.log("B");

console.log("i ===> "+i);

return i;

}

// console.log(arr);

// console.log("arr ===> "+arr[i]());


}


console.log("[for문 END]FINAL return값 i ===> "+i);


console.log("[for/in문 START]");


for(var index in arr) {

console.log("C");

console.log("index ====> "+index);

console.log("arr ===> "+arr[index]());

}

</script>

</body>

</html>


6.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<script>

var arr = []

console.log("START");

for(var i = 0; i < 5; i++){

arr[i] = (function(id){

console.log("A");

console.log("i ===> "+i);

return function(){

console.log("B");

console.log("id ===> "+id);

return id;

}

})(i);

// console.log("[for문]arr ===> "+arr[i]());

}

console.log("[for문 END]FINAL return값 i ===> "+i);

console.log("[for/in문 START]");

for(var index in arr) {

console.log("C");

console.log("index ====> "+index);

console.log("arr ===> "+arr[index]());

}

</script>

</body>

</html>

반응형
저작자표시

'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글

[생활코딩 함수] 함수 호출 5  (0) 2017.06.05
[생활코딩 함수] arguments 4  (0) 2017.06.02
[생활코딩 함수] 값으로서의 함수 2  (0) 2017.05.31
[생활코딩 함수] 유효범위 1  (0) 2017.05.30
[자바스크립트 기초]제이쿼리 4  (2) 2017.03.05

관련글

댓글

티스토리툴바