참조 및 번역 : 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").