자바스크립트 객체

객체(Object)란? 실제 세상에 존재하는 사물을 모델링한 것이다. 객체는 데이터와 동작을 가지도 있다. 객체의 데이터는 객체가 가지고 있는 특성값이다. 예를 들어 자동차는 모델,제조사,마력,색상,연식,속도등 이데이터이다 객체의 동작은 객체가 수행할 수 있는 행동이다. 자동차를 예를 들면 출발하기,감속하기,방향전환하기,등을 생각할 수 있다. 

자바스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다, 객체 안의 변수를 속성이라 하고 객체 안의 함수를 메서드라고 부른다. 즉 객체는 속성과 메서드로 이루어져 있는 하나의 엔터티(묶음)이라고 할 수 있다.

객체 생성 및 사용

자바스크립트안의 객체는 2가지로 나뉘는데 내장객체와 사용자 정의 객체로 나눌 수 있다.

1.내장객체 : 생성자가 미리 작성되어 있다.

2.사용자 정의 객체 : 사용자가 생성자를 정의한다.

Date,String,Array와 같은 객체가 내장 객체이다. 또한 HTML 문서를 나타내는 객체인 document도 내장 객체라고 생각 할 수 있다. 

객체 생성 방법

새로운 객체를 생성하는데는 크게 2가지 방법이 있다.

1.객체를 객체 상수로부터 직접 생성한다.

2.생성자 함수를 이용하여 객체를 정의하고 new를 통하여 객체의 인스턴스를 생성한다.

객체 상수로부터 직접생성

<script>

var Car = {

    model : "520d",

    speed : 60,

    color : "red",

    break : function () {this.speed -= 10; },

    accel : function () {this.speed += 10; }

};

</script>

위의 문장이 실행되면 객체가 생성되고 객체의 이름이 myCar가 된다. 이후 다음과 같이 사용한다

myCar.color = "yellow";

myCar.brake();

이 방법은 간단하지만 하나의 객체만 생성한다. 추가로 객체를 생성하려면 동일한 코드를 짜야한다. 이런식으로 정의된 객체를 싱글톤이라고 부른다 싱글톤은 객체가 하나만 생성된다는 것을 의미한다.

생성자 함수를 이용한 객체 생성

개발자는 자신만의 객체도 생성할 수 있다. 이것을 사용자 정의 객체라고 한다. 사용자가 객체를 생성하려면 생성자라는 특별한 함수가 필요하다 생성자는 객체를 초기화 하는 역활을 한다. 객체를 생성하는 연산자는 new 이다.\

<script>

function Car(model,speed,color) { //생성자도 함수고 이름은 항상 대문자로 한다.

 

    this.model = model; /* 객체의속성 */

    this.speed = speed;

    this.color = color;      //여기까지 속성

 

    this.brake = function () { /*객체의 메서드 */

        this.speed -= 10;

    }

    this.accel = function () {

        this.speed += 10;

    }  //여기까지 메서드

}

</script>

 

this는 코드를 실행한느 현재 객체를 의미한다. 생성자는 전달된 매개 변수값으로 현재 객체의 속성을 설정한다. this가 없다면 속성을 지역 변수로 혼동할 수 있기 때문에 객체의 속성에는 반드시 this를 붙인다. 앞에 this가 붙은 변수는 속성이고 앞에 this 가 붙는 함수는 메서드이다.

생성자를 정의하였을 때, 객체는 다음과 같이 생성 할 수 있다.

var myCar = new Car ("520d", 60, "white");

myCar.color = "yellow";

myCar.brake();

객체를 생성하려면 먼저 new  연산자르 쓰고 그 뒤에 생성자를 호출하는 문장을 작성하면 된다. new연산자가 객체를 생성하고 생성자가 객체를 초기화한다. new 연산자를 생략하고 생성자만을 호출하면 객체가 만들어지지 않는다. 항상 new 연산자를 사용해야 한다.

이 방법의 장점은 개발자가 원하는 갯수만큼 객체를 쉽게 만들 수 있다는 것이다. 개발자가 개발 도중에, 필요하지만 자바스크립트에서 지원하지 않는 객체를 생성하고 싶을 때 사용하게 된다.

내장 객체는 미리 생성자 함수가 작성되어 있다. 따라서 내장 객체의 경우 생성자를 작성할 필요 없이 new하여서 객체를 생성하고 사용하면 된다.

객체 멤버 사용하기

객체 안의 속성과 메서드는 객체 멤버라고 한다. 객체 멤버를 사용하기 위해서는 점(dot)  연산자를 사용한다. 먼저 어떤 객체에 속해 있는지를 말하고 나중에 멤버 이름을 말하는 것이다.

구체적으로 myCar라는 이름의 객체 안에 color 속성을 "red"로 변경하는 문장은 다음과 같다.

myCar    .  color  = "red";

객체이름 속성이름

객체의 메서드도 동일한 형식이다.

myCar  .    brake();

객체이름   메서드이름

예제)

<script>

function Car (model,speed, color)

{

    this.model=model;

    this.speed=speed;

    this.color + color;

    this.brake = function () {

        this.speed -=10;

    }

    this.accel = function () {

        this.speed += 10;

 }

}

myCar = new Car("520",60,"red");

document.write("모델:" + myCar.model + "속도:" + myCar.speed + "<br>");

myCar.accel();

document.write("모델:" + myCar.model + "속도:" + myCar.speed + "<br>");

myCar.brake();

document.write("모델:" + myCar.model + "속도:" + myCar.speed + "<br>");

</script>

 

기존의 객체에 속성과 메서드 추가하기

자바스크립트에서는 기존에 존재하고 있던 객체에도 속성을 추가할 수 있다. 생성자를 변경할 필요 없이 단순히 값을 대입하는 문장을 적어주면 된다.

<script>

// 기존의 myCar 객체가 있다고 가정하자.

myCar.turdo = true;

myCar.showModel = function() {

    alert ("모델은" + this.model + "입니다.")

}

</script>

생성자 함수는 전혀 변경할 필요가 없다.

프로토 타입

하나의 객체가 가지고 있는 속성과 메서드는 다른 객체가 전혀 이용할 수 없다. 

속성이나 메서드를 여러 객체가 공유하는 것이 필요할 경우에 프로토 타입을 쓴다.

 

<script>

function point(xpos, ypos) {

    this.x = xops;

    this.y = ypos;

    this.getDistance = function () {

        return Math.sqrt(this.x * this.x + this.y * this.y);

    };

}

var p1 = new point(10,20);

var p2 = new point(10,30);

</script>

이렇게 해도 문제는 없지만 메서드가 객체안에서 정의 되어 있다. 따라서 생성되는 모든 Point 객체는 내부이 이 메서드를 갖고 있다. 명백하게 이것은 메모리를 낭비하면서 비효율적이다. getDistance()메서드를 모든 객체가 공유하면 메모리의 낭비를 줄일 수 있다.

<script>

function point(xpos, ypos) {

    this.x = xops;

    this.y = ypos;

    point.prototype.getDistance = function () {

        return Math.sqrt(this.x * this.x + this.y * this.y);

};

</script>

위의 getDistance()메서드는 prototype객체 안에서 정의 된다. 따라서 객체를 아무리 많이 생성하더라도 getDistance()메서드는 오직 하나만 존재 한다.

프로토타입안에 정의하였지만 객체를 통하여 메서드를 호출하는 방법은 동일하다.

var p1 =new Point(10,20);

p1.getDistance();

또 하나의 인스턴트가 생성되서 getDistance()호출된다고 해도 동일안 메서드가 사용된다.

 

var p2 =new Point(10,30);

p2.getDistance();

 

예제)

<script>

function point(xpos ,ypos) {

    this.x = xpos;

    this.y = ypos;

}

point.prototype.getDistance = function (p) {

    return Math.sqrt(this.x * this.x + this.y * this.y);

}

var p1 = new point (10,20);

var d1 = p1.getDistance();

var p2 = new point (10,30);

var d2 = p2.getDistance()

document.write(d1 + "<br>");

document.write(d2 + "<br>");

</script>

 

 

*매서드만 공유하였지만 속성도 같은 방법으로 공유할 수 있다.

piint.prototype.shared = 10;

프로토타입 체인

자바스클비트에서 속성이나 메서드를 참조하게 되면 다음과 같은 순서대로 찾는다.

1. 객체 안의 속성이나 메서드가 정의되어 있는지 체크한다.

2. 객체 안에 정의되어 있지 않으면 객체의 prototype이 속성이나 메서드를 가지고 있는지 체크한다.

3. 원하는 속성/메서드를 찾을 때까지 프로토타입 체인을 따라서 올라간다.

이것을 프로토타입 체인이라고 한다.

Object 객체

Object 객체는 자바스크립트 객체의 부모가 되는 객체이다. 모든 자바스크립트 객체는 Object 객체를 기초로 하여 생성된다. 따라서 객체는 내부에 Object객체의 속성과 메서드는 가지고 있다고 생각해도 좋다.

Object객체가 가진 속성/메서드는 다음과 같다.

속성/메서드	설명
constructor	속성으로 생성자 함수를 가르킨다. var d= new Date(); d.construtor는Date()와 같다.
valueOf()	메서드로서 객체를 숫자로 변환한다.
toString()	메서드로서 객체의 값을 문자열로 변환한다.
hasOwnProperty	전달 인수로 주어진 속성을 가지고 있으면 true 반환
isPrototypeOf()	현재 객체가 전달 인수로 주어진 객체의 프로토타입이면 true 반환

Object객체의 메서드는 하위 객체에서 재정의해서 사용할 수 있다. 예를 들어 Object객체의 메서드인 tostring()을 하위 객체에서 오버라이딩(재정의)해서 다시 정의할 수 있다.

<script>

myCar.toString = function () {

    return "새로 생성된 객체입니다."

}

document.write(myCar.toString());

</script>;

자바스크립트 내장 객체

Date 객체

Date 객체는 날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체이다.

Date 객체를 생성하는 기본적인 방법은 4가지가 있다. Date 객체를 생성할 때, 문자열을 인수로 줄 수 있고 정수를 줄 수도 있다.

new Date() //현재 날짜와 시간

new Date(milliseconds) // 1970/01/01 이후의 밀리초

new Date(dateString) // 다양한 문자열

new Date(year,month, date[,hours[,minutes[,seconds[,ms]]]])

 

자바스크립트의 Date 객체는 매우 강력한 날짜 파서를 가지고 있어서 문자열로 날짜를 지정한느 많은 방법을 가진다.

가장 기본적인 방법은 연,월,일,시,분,초,밀리초 순서대로 정수를 입력하는 방법이다. 여기서 주의할 점은 월 0부터 시작한다는 점이다 1월부터 시작할때는 0을 입력한다.

var d1 = new Date (2013, 7, 24); // 2013년 8월 24일

var d2 = new Date (2013, 7, 24, 18, 30, 0); 

var d3 = new Date (2013, 7, 24, 18, 30, 0, 0); 

1970년 이후로 경과된 밀리초를 입력할 수도 있다.

var d3 = new Date (100000000); // 율리우스 숫자로 날짜를 지정