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

매일코딩/자바스크립트 개념

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

인생여희 2017. 6. 1. 12:30

<HTML>

<HEAD>

<TITLE> closure</TITLE>

</HEAD>

<script>

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

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

function outter(){

var name = 'kang';

function inner(){

alert(name)

}

inner();

}

outter();

</script>

<BODY>

</BODY>

</HTML>

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

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

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

<!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>

<!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>

저작자표시