JavaScript는 기본적으로 java와 다르게 접근에 대한 권한 설정을
못하는 듯 하다(ㅈㅣ금까지 배운 내용으로는 그러한듯.)
그래서 중첩함수를 통하여 변수 및 함수에 대한 접근을 통제하는
기법이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-08</title>
</head>
<body>
<script type="text/javascript">
// 중첩함수
function circle(radius) {
var pi = 3.14;
// 중첩함수는 내부 변수에 접근가능합니다.
function area(r) {
return r * r * pi;
}
// 중첩함수는 내부에서만 호출 가능합니다.
return area(radius);
}
document.writeln('circle(5): ' + circle(5) + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
위 내용을 본다면 Java의 캡슐화를 중첩함수의 기법에 따라 구현한듯 하다
사용자는 함수의 구체적 내용을 몰라도 circle(5)를 선언한다면
반환값은 area(5)가 실행되어 78.5가 반환되어진다.
말하자마자 클로저란 개념이 나왔다.
클로저란?
- 실행될 코드와 함수의 유효 범위, 다시 말해 함수의 호출 객체와 연결된 스코프 체인의 조합
- 함수의 지역변수에 대한 중첩함수를 만들면 비공개 속성과 접근자 메소드를 구현해 객체지향의
정보은닉을 실현할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-11</title>
</head>
<body>
<script type="text/javascript">
// 클로저
// 1. 전역 레벨의 파싱 결과 전역객체에 프로퍼티 makeId와 id가 정의됩니다.
function makeId() {
var lastId = 0;
return function() { return ++lastId; };
}
// 2. 함수레벨의 파싱 결과 makeId() 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화 되고,
// 프로퍼티 lastId가 정의되고,
// 전역객체와 makeId() 함수의 호출객체 간에 스코프 체인이 연결된 후,
// makeId() 함수가 실행되고, id는 익명함수를 반환받습니다.
var id = makeId();
// 3. 함수 레벨의 파싱 결과 id 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화되고,
// makeId 함수의 호출 객체와 id 함수의 호출 객체 간에 스코프 체인이 연결되고,
// id 함수의 코드를 실행합니다.
// 이 때 lastId는 makeId 함수의 호출객체에 접근해서
// 그 값을 취합니다.
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
id는 makeId()의 반환값인 익명 함수가 저장되므로 객체가 된다. 따라서 id()로 호출해야하고
호출시마다 id는 1이 증가하게 된다.
이러한 기법을 통하여 Java의 접근자 개념에 대한 함수 또한 생성할 수 있을 듯하다.
변수 범위를 통하여 접근을 제한시키고 정보은닉을 구현하는 기법이다.
- 참조
T아카데미
http://chanlee.github.io/2013/12/10/understand-javascript-closure/
'Web > JavaScript' 카테고리의 다른 글
| [ Typeorm ] DB에서 Entity 항목들 가져오기 (0) | 2020.12.16 |
|---|---|
| [ Google Map ] Marker 위에 InfoWindow 띄우기 (0) | 2020.07.06 |
| [ JavaScript ] 객체 배열에서 객체 내부 값으로 삭제하기 (0) | 2020.07.01 |
| [ Angular ] angular version check (0) | 2019.12.09 |
댓글