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

jQuery

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

우혁이 아빠 2009. 12. 14. 01:15

원본 소스

http://insightbook.springnote.com/pages/1582932

2-1 동일한 객체를 가리키는 여러 변수들에 대한 예

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

<HTML>

<HEAD>

//obj를 빈 객체로 설정한다.

var obj = new Object();

//이제 objRef는 앞의 빈 객체를 가리킨다.

var objRef = obj;

//앞에서 생성했던 객체의 프로퍼티를 수정한다.

obj.oneProperty = true;

//(두 변수 모두 동일한 객체를 가리키고 있기 때문이다.)

alert(obj.oneProperty == objRef.oneProperty);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-2 스스로를 수정할 수 있는 객체에 대한 예

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

<HTML>

<HEAD>

//아이템 배열을 생성한다.

var items = new Array("one", "two", "three");

//아이템 배열에 대한 참조를 하나 생성한다.

var itemsRef = items;

//원본 배열에 아이템을 하나 추가한다.

items.push("four");

//두 변수가 동일한 배열 객체를 가리키기 때문에

//각 배열의 크기가 같아야 한다.

alert(items.length == itemsRef.length);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-3 원래 객체는 그대로 두고 한 객체의 참조를 변경

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

<HTML>

<HEAD>

//items가 문자열 배열을 가리키게 한다.

var items = new Array("one", "two", "three");

//itemsRef가 items 참조를 가리키게 한다.

var itemsRef = items;

//items가 새로운 객체를 가리키게 한다.

items = new Array("new", "array");

//items와 itemsRef는 이제 서로 다른 객체를 가리킨다.

//items는 new Array("new", "array")를 가리키고

//itemsRef는 new Array("one", "two", "three")를 가리킨다.

alert(items != itemsRef);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-4 내용을 수정할 수 없는 새로운 객체를 만드는 객체 수정에 대한 예

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

<HTML>

<HEAD>

//items이 새로운 문자열 객체를 가리키게 한다.

var item = "test";

//itemRef는 이제 동일한 문자열 객체를 가리킨다.

var itemRef = item;

//문자열 객체에 새로운 텍스트를 이어붙이다.

//주목:이렇게 하면 원본 객체를 수정하지 않고

//새로운 객체를 만든다.

item += "ing";

//완전히 새로운 객체를 생성했기 때문에

//item과 itemRef는 서로 다르다.

alert(item);

alert(itemRef);

alert(item != itemRef);

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-5 자바스크립트 함수 오버로딩에 관한 두 가지 예

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

<HTML>

<HEAD>

//메시지를 보내는 간단한 함수

function sendMessage (msg, obj) {

//메시지와 객체 모두를 받으면

if (arguments.length == 2)

//객체에 메시지를 보낸다.

obj.alert(msg);

//그렇지 않으면 메시지만 받았다고 판단한다.

else

//단순히 기본 에러 메시지를 출력한다.

alert(msg);

}

//다음 두 호출 모두 제대로 작동한다.

sendMessage("Hello, World!");

sendMessage("How are you?", window);

//전달인자를 여러 개 받아 배열을 만들어 반환하는 함수

function makeArray () {

//임시 배열

var arr = [];

//각 전달인자를 방문한다.

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

arr.push(arguments[i]);

}

//생성한 배열을 반환한다.

return arr;

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-6 에러 메시지나 기본 메시지 출력하기

기본

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

<HTML>

<HEAD>

function displayError (msg) {

//msg가 정의되었는지 검사한다.

if (typeof msg == 'undefined') {

//msg가 정의되지 않았으면 기본 메시지를 사용한다.

msg = "An error occured.";

}

//메시지를 출력한다.

alert(msg);

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

응용

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

<HTML>

<HEAD>

function displayError () {

var frm = document.form;

var msg = frm.msg.value;

//msg가 정의되었는지 검사한다.

if (msg == '') {

//msg가 정의되지 않았으면 기본 메시지를 사용한다.

msg = "An error occured.";

}

//메시지를 출력한다.

alert(msg);

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</form>

</BODY>

</HTML>

2-7 객체의 타입을 결정하는 데 typeof 를 사용한 예

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

<HTML>

<HEAD>

//숫자를 담은 변수가 실제로는 문자열인지 검사한다.

if (typeof num == "string") {

//그렇다면 문자열을 파싱해서 숫자를 얻는다.

num = parseInt(num);

}

//배열을 담은 변수가 실제로는 문자열인지 검사한다.

if (typeof arr == "string") {

//그렇다면 배열을 만들기 위해 쉼표(,)를 기준으로 문자열을 나눈다.

arr = arr.split(",");

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-8 객체의 타입을 결정하는 데 constructor 프로퍼티를 사용하는 예

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

<HTML>

<HEAD>

//숫자를 담은 변수가 실제로는 문자열인지 검사한다.

if (num.constructor == "String") {

//그렇다면 문자열을 파싱해서 숫자를 얻는다.

num = parseInt(num);

}

//배열을 담은 변수가 실제로는 문자열인지 검사한다.

if (arr.constructor == "String") {

//그렇다면 배열을 만들기 위해 쉼표(,)를 기준으로 문자열을 나눈다.

arr = arr.split(",");

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

변수 타입 검사하지

Variable	typeof Variable	Variable.constructor
{an:"object"}	object	Object
["an", "array"]	object	Array
function(){}	function	Function
"a string"	string	String
55	number	Number
true	boolean	Boolean
new User()	object	User

2-9 함수에 전달되는 모든 전달인자를 엄격하게 관리하는 함수

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

<HTML>

<HEAD>

//변수 타입 목록을 기준으로 전달인자 목록을 엄격히 검사한다.

function strict (types, args) {

//타입의 개수와 전달인자 개수가 일치하는지 확인한다.

if (types.length != args.length) {

//일치하지 않으면 유용한 정보를 담은 예외를 던진다.

throw "Invalid number of arguments. Expected " + types.length +

", received " + args.length + " instead.";

}

// 각 전달인자를 방문하면서 타입을 검사한다.

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

//타입이 일치하지 않으면 유용한 정보를 담은 예외를 던진다.

if (args[i].constructor != types[i]) {

throw "Invalid argument type. Expected " + types[i].name +

", received " + args[i].constructor.name + " instead.";

}

//사용자 목록을 출력하는 간단한 함수

function userList (prefix, num, users) {

//prefix는 문자열, num은 숫자,

//users가 배열임을 명확히 한다.

strict([String, Number, Array], arguments);

//'num' 개수만큼 사용자들을 방문한다.

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

//각 사용자에 관한 메시지를 출력한다.

alert(prefix + ": " + users[i]);

}

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2-10 자바스크립트에서 변수 유효범위가 어떻게 작동하는지 보여주는 예

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

<HTML>

<HEAD>

//전역 변수 foo를 test로 설정

var foo = "test";

//if 블록 안

if (true) {

//foo를 'new test'로 설정

//주목: 이곳은 여전히 전역 유효번위 안이다.

var foo = "new test";

}

//다음에서 볼 수 있듯이 foo도 역시 'new test'가 되었다.

alert(foo == "new test");

//변수 foo를 수정하는 함수를 만든다.

function test () {

var foo = "old test";

}

//함수가 호출될 때 'foo'는 함수 유효범위 안에 있다.

test();

//여기서 확인할 수 있다. foo의 값은 여전히 'new test'다.

alert(foo == "new test");

</script>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

저작자표시