새로운 객체 만들기

예제



JavaScript 객체

앞에서 String, Date, Array 등과 같이 JavaScript가 기본으로 제공하는 객체들에 대해서 알아 보았다. 이제 부터는 자신만의 객체를 만드는 것을 해보도록 하겠다.

객체란 속성과 메서드들로 구성된 하나의 특정의 데이터이다.

예를 들어 인간이라는 객체를 알아보자. 속성은 객체가 가지고 있는 값들이다. 인간이라는 객체의 속성은 이름, 키, 몸무게, 나이, 피부색, 눈의 색깔 등등이 있다. 모든 인간은 이러한 속성을 가지지만 한 사람 한 사람 그 속성의 값은 달라진다. 객체는 메서드를 가진다. 메서드란 객체에 대해서 조작을 할 수 있는 액션이다. 인간 객체는 먹기(), 자기(), 일하기(), 놀기() 등등의 메서드를 가질 것이다.

속성(Property)

어떤 객체의 속성을 구하는 문법은 [객체명].[속성명]이다.

objName.propName

객체에 속성을 추가하는 방법은 그냥 값을 대입하기만 하면된다. personObj라는 오브젝트가 존재한다고 전제하고 아래와 같이 firstname, lastname, age, eyecolor라는 속성을 추가할 수 있다.

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

document.write(personObj.firstname);

실행 결과는 다음과 같을 것이다.

John

메서드(Method)

객체는 메서드도 담을 수 있다.
메서드 호출 문법은 아래와 같이 [객체명].[메서드명]()이다.

personObj.methodName()

주석: 메서드가 인수를 요구하는 경우에는 괄호의 안에 인수를 전달한다.
personObj라는 객체의 sleep()이라는 메서드를 호출할 경우는 아래와 같이 된다.

personObj.sleep()

자신만의 객체 생성하기

객체를 생성하는 방법은 2가지가 존재한다.

1. 다이렉트 인스턴스 객체 생성
아래의 예는 객체의 인스턴스를 생성하고 4개의 속성을 추가한다.

personObj = new Object();
personObj.firstname = "John";
personObj.lastname = "Doe";
personObj.age = 30;
personObj.eyecolor = "blue";

객체에 메서드를 추가하는 방법도 간단하다. personObj객체에 eat()라는 메서드를 추가하려고 하면 아래와 같다. (주: eat이라는 함수가 정의 되어 있어야 함)

personObj.eat = eat;

2. 객체의 템플릿 생성
템플릿이란 객체의 구조(구성)정의를 의미한다.

function person(firstname, lastname, age, eyecolor)
{
  this.firstname = firstname;
  this.lastname = lastname;
  this.age = age;
  this.eyecolor = eyecolor;
}

템플릿도 단지 함수에 지나지 않는 다는 점에 주목한다. 함수 내에서는 this.[프로퍼티명]을 사용해서 값들을 담아야 한다. this가 의미하는 것이 호출된  당시의 객체를 의미한다.

이 템플릿으로 객체의 인스턴스를 생성하는 방법은 아래와 같다.

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

메서드를 추가하는 것도 간단하다.

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_nastname) {
  this.lastname = new_lastname;
}

JavaScript는 메서드를 호출할 당시의 대상이 된 객체를 this를 통해서 구분할 수 있다. (예> myFather.[메서드명]의 경우 this는 myFather이 된다) 이제 myMother.newlastname("Doe") 라고 호출하는 것이 가능하다.




원문: http://www.w3schools.com/JS/js_objects.asp
번역: 허련호(airless at funit.net)
2009/04
Comments