객체지향 자바스크립트 2-2

2-11 자바스크립트에서 전역 유효범위와 Window 객체

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//문자열 "test"를 담은 전역 유효범위에 속하는 변수

var test = "test";

//앞의 '전역' 변수와 window 객체의 test 프로퍼티가

//같음을 알 수 있다.

alert(window.test == test);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-12 함축적이 전역 유효범위 변수 선언의 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//foo의 값을 설정하는 함수

function test () {

//var foo 로 하면 false가 뜬다. 전역변수가 아니기때문?
foo = "test";

}

//foo 값을 설정하기 위해 다음 함수를 호출한다.

test();

//foo는 이제 전역 유효범위를 가진다.

alert(window.foo == "test");

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-13 클로저가 어떻게 코드의 의미를 명료하게 만드는지 보여주는 두 가지 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

window.onload = function () {

//ID가 'main'인 엘리먼트를 찾는다.

var obj = document.getElementById("main");

//테두리 스타일을 바꾼다.

obj.style.border = "1px solid red";

//1초 후에 발생할 콜백을 초기화한다.

setTimeout(function () {

//엘리먼트를 감춘다.

obj.style.display = 'none';

}, 1000);

//일정 시간이 지난 후에 경고 메시지를 출력하는 범용 함수

function delayedAlert (msg, time) {

//내부 콜백을 초기화한다.

setTimeout(function () {

//둘러싸는 함수에서 넘겨받은 msg를 활용한다.

alert(msg);

}, time);

}

//두 개의 전달인자로 delayedAlert 함수를 호출한다.

delayedAlert("Welcome!", 2000);

};

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-14 클로저로 함수를 커링하는 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//숫자를 더하는 함수를 만드는 함수

function addGenerator (num) {

//둘러싸는 함수에서 숫자 하나를 빌려와서

//두 숫자를 더하는 간단한 함수를 돌려준다.

return function (toAdd) {

return num + toAdd

};

}

//이제 addFive는 전달인자 하나를 받아서

//5를 더한 결과를 돌려주는 함수가 된다.

var addFive = addGenerator(5);

//전달인자 4로 addFive 함수를 호출하면

//그 결과가 9인 것을 확인할 수 있다.

alert(addFive(4) == 9);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-15 변수들을 전역 유효범위에서 볼 수 없게 익명 함수를 사용하는 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//포장용으로 쓸 새 익명 함수를 만든다.

(function () {

//보통이라면 전역 변수로 선언되었을 변수

var msg = "Thanks for visiting!";

//새 함수를 전역 객체에 연결한다.

window.onunload = function () {

//숨겨진 변수를 사용한다.

alert(msg);

};

//익명 함수를 닫은 후 실행한다.

}) ();

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-16 클로저를 사용하는 여러 함수를 생성하는 데 필요한 유효범위를 만드는 익명 함수의 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

window.onload = function () {

//ID가 main인 엘리먼트

var obj = document.getElementById("main");

//이 엘리먼트에 연결할 아이템 배열

var items = ["click", "keypress"];

//각 아이템을 방문한다.

for ( var i = 0; i < items.length; i++) {

//유효범의를 만들기 위해 스스로를 실행하는 익명 함수를 사용한다.

(function(){

//함수를 엘리먼트에 연결한다.

obj["on" + items[i] ] = function () {

//다음에 나오는 변수 items[i]는 유효범위가 for 루프인

//부모 변수 items[i]를 참조한다.

alert("Thanks for your " + items[i]);

};

})();

}

};

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

자바스크립트 클로저 http://jibbering.com/faq/faq_notes/closure.html

2-17 한 콘텍스트 안에서 함수를 사용한 후 콘텍스트를 다른 변수로 바꾸는 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

var obj = {

yes: function () {

//this == obj

this.val = true;

no: function () {

this.val = false;

}

};

//'obj' 객체에 val라는 프로퍼티는 없다.

alert(obj.val == null);

//yes 함수를 호출하면 'obj' 객체와 연결된

//val 프로퍼티의 값이 바뀐다.

obj.yes();

alert(obj.val == true);

//이제 window.no가 메서드 obj.no를 가리키게 한 다음 메서드를 실행해 보자.

window.no = obj.no;

window.no();

//obj 객체는 그대로 있고

//(콘텍스트가 window 객체로 바뀌었기 때문에),

alert(obj.val == true);

//window의 val 프로퍼티 값이 바뀌었다.

alert(window.val == false);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-18 함수 콘텍스트를 바꾸는 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

window.onload = function () {

//자신의 콘텍스트 색을 변경하는 간단한 함수

function changeColor (color) {

this.style.color = color;

}

//window 객체에는 style 객체가 존재하지 않으므로

//window 객체에 대고 호출하면 호출이 실패한다.

//changeColor("blue");

//ID가 main인 엘리먼트를 찾는다.

var main = document.getElementById("main");

//call 메서드를 사용해 검은색으로 바꾼다.

//call 메서드는 첫 번째 전달인자를 콘텍스트로 설정하고

//나머지 전달인자를 함수의 전달인자로 넘긴다.

changeColor.call(main, "black");

//body 엘리먼트의 색을 설정하는 함수

function setBodyColor () {

//apply 메서드는 첫 번째 전달인자인 body 엘리먼트로

//콘텍스트를 설정한다. 전달인자 배열인 두 번째 전달인자는

//함수의 전달인자로 넘긴다.

changeColor.apply(document.body, arguments);

}

//body 엘리먼트의 배경색을 검은색으로 설정한다.

setBodyColor("black");

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-19 간단한 객체를 하나 생성하고 프로퍼티를 설정하는 두 가지 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//Object 객체를 만들고 'obj' 안에 저장한다.

var obj = new Object();

//이 객체의 프로퍼티 몇 개를 다른 값으로 설정한다.

obj.val = 5;

obj.click = function () {

alert("hello");

};

//프로퍼티를 정의하는 키/값 쌍을 {...} 방식으로 나열하여,

//앞의 코드와 동일한 일을 하는 코드다.

var obj = {

//키/값 쌍을 사용해 프로퍼티 이름과 값을 설정한다.

val: 5,

click: function () {

alert("hello");

}

};

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-20 간단한 객체를 하나 생성하고 사용하기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

//이름을 하나 받아서 현재 콘텍스트에 저장하는 간단한 함수

function User (name) {

this.name = name;

}

//이름을 주면서 함수의 새 인스턴스를 생성한다.

var me = new User("My Name");

//이름이 me의 프로퍼티로 설정된 것을 볼 수 있다.

alert(me.name == "My Name");

//그리고 me가 User 객체의 인스턴스임을 알 수 있다.

alert(me.constructor == User);

//단순히 보면 User()가 함수이므로,

//함수 취급을 하면 어떻게 될까?

User("Test");

//이 함수의 this 콘텍스트가 설정되지 않았기 때문에

//콘텍스트는 기본적으로 전역 변수 'window'가 된다.

//그 결과 주어진 이름과 window.name 이 같아진다.

alert(window.name == "Test");

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

저작자표시

'javascript > proJavaScript' 카테고리의 다른 글

객체지향 자바스트립트 2-3 (0)	2009.12.14

행복 만들기 - 믿고, 사랑하고 기다리기

객체지향 자바스크립트 2-2

'javascript > proJavaScript' 카테고리의 다른 글

티스토리툴바

객체지향 자바스크립트 2-2

'javascript > proJavaScript' 카테고리의 다른 글

'javascript/proJavaScript' Related Articles

티스토리툴바