Whiteship's Note

JavaScript Create Your Own Objects

AJAX/JavaScript : 2007.07.10 11:56


참조 및 번역 : http://www.w3schools.com/js/js_objects.asp

자바스크립트 객체

본 튜토리얼 초기에 자바스크립에 내장되어 있는 객체들 String, Date, Array 기타 등등 같은 것들을 살펴봤습니다. 이런 내장된 객체에 더해서 여러분이 직접 객체를 만들 수 있습니다.

객체는 단지 속성과 메소드로 구성된 특별한 데이터의 종류 입니다.

예제로 생각해보자: person은 객체다. 속성은 객체와 관련있는 값들이다. person의 속성은 name, height, weight, age, skin tone, eye color, 기타 등등이 있다. 모든 person은 이러한 속성들을 가지고 이지만 그 들의 값은 person 마다 다르다. 객체는 메소드도 가지고 있다. 메소드는 객체가 수행할 수 있는 행위다. person의 메소드는 eat(), sleep(), work(), play() 기타 등등이다.

속성

객체의 속성에 접근하는 문법은 다음과 같다.
objName.propName

객체에 값을 추가함으로써 속성을 추가할 수 있다. personObj가 이미 존재 한다고 생각하고 속성 이름 firstname, lastname, age 그리고 eyecolor에 값을 줄 수 있다.

personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=30
personObj.eyecolor="blue"

document.write(personObj.firstname)
위의 코드는 다음과 같이 출력할 것이다.
John

메소드

객체는 메소드도 가지고 있다.

다음과 같은 문법으로 메소드를 호출 할 수 있다.
objName.methodName()

주의: 메소드에서 필요로 하는 파라미터를 괄호 안에 넣어 줄 수 있다.

persionObj 의 sleep() 메소드를 다음과 같이 호출 할 수 있다.

personObj.sleep()

객체 만들기

새로운 객체를 만드는 여러 방법이 있습니다.

1. 객체의 인스턴스를 직접 만들기

다음의 코드는 객체의 인스턴스를 만들고 4개의 속성을 추가합니다.
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"

personObj에 메소드를 추가하는 것도 간단합니다. 다음의 코드는 eat()이라는 메소드를 personObj에 추가하고 있습니다

personObj.eat=eat

2. 객체의 탬플릿 만들기

탬플릿은 객체의 구조를 정의합니다.
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

탬플릿은 단순한 함수라는 것에 주목하시기 바랍니다. 함수의 내부에서 this.속성명 과 같은 식으로 추가할 수 있습니다. "이런" 작업을 하는 이유는 한 번에 여러 개의 person 객체를 사용할 수 있기 때문입니다.

탬플릿을 만들고 나면, 새로운 객체를 다음과 같이 만들 수 있습니다.

myFather=new person("John","Doe",50,"blue")
myMother=new person("Sally","Rally",48,"green")

person 객체 몇몇 메소드를 추가할 수 도 있습니다. 이것도 역시 탬플릿 내부에서 합니다.
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor

this.newlastname=newlastname
}

메소드는 객체에 붙이는 단순한 함수 입니다. 다음에는 newlastname() 함수를 작성합니다.
function newlastname(new_lastname)
{
this.lastname=new_lastname
}

newlastname() 함수는 person의 새로운 last name을 person객체 대입합니다.
자바스크립트는 "this"를 사용함으로써 어떤 person을 다루고 있는지 알게 됩니다. 이제 다음과 같이 사용할 수 있습니다.
myMother.newlastname("Doe").

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top