JavaScript 객체 지향의 특징

자바스크립트에서 모든 것들은 <객체>에 기반을 두고 있다. 이 글에서는 자바스크립트 객체만의 특징을 정리했다.

자바스크립트는 프로토타입 기반의 완전한 객체 지향 언어이다. 객체 컨셉의 개념을 정리하자면 아래와 같다.

  • 객체 (Instance)

    • 특징 == 속성(Property) == 변수

    • 동작 == 메소드(Method) == 함수

즉, 객체는 서로 연관된 변수와 함수를 그룹화한 그릇이라고 할 수 있다. 이 글에서는 자바스크립트 객체만의 특징을 정리했다.

1. 프로토타입(Prototype)

var SoccerPlayer = function () { };

SoccerPlayer.prototype = { 
    name: String,
    age: Number,
    height: Number,
    weight: Number,
    position: String,
    team : String
};

var park_ji_sung = new SoccerPlayer(); 

park_ji_sung.name = "Park Ji Sung"; 
park_ji_sung.age = 31;
park_ji_sung.height = 178;
park_ji_sung.weight = 70;

console.log(park_ji_sung);

위 예제를 객체 지향 컨셉에 맞게 설명하면,

"박지성이라는 객체를 SoccerPlayer라는 클래스를 이용하려 생성했다."

라고 할 수 있다.

그런데 사실, 자바스크립트에는 클래스라는 개념이 존재하지 않는다. 클래스(함수) 자체도 객체이기 때문이다. 다시 말해 자바스크립트에서 모든 것들은 객체에 기반을 두고 있다.

대신 프로토타입 이라는 표현법이 존재한다. 원형이라는 뜻인데, 위 개념을 프로토타입 객체 지향 개념으로 설명하면,

"SoccerPlayer라는 생성자 함수(객체)를 재사용하여 이것을 하나의 프로토타입으로서 밑바탕에 깔고 박지성이라고 불리는 새로운 객체를 생성한다."

라고 정리할 수 있겠다. 조금 헷갈리지만, "생성자 함수를 통해 생성된 객체들이 공통으로 가지는 속성(property) = 공통으로 가지는 메소드를 저장해놓는 별도의 메모리 공간 = 프로토타입 " 이라고 이해했다.

그렇다면 생성자 함수가 정확히 뭔지 이해할 필요도 있을 것 같다.

2. 생성자 함수 (Constructor Function)

생성자는 객체를 생성할 때 최초로 호출되는 함수를 의미한다. 즉, 생성자는 객체를 만드는 역할을 하는 함수다.

객체 구조의 재활용, construct

생성자 함수를 이용하여 객체를 생성하는 방법의 장점은 새로운 객체를 만들 때 초깃값을 전달하여 생성할 수 있다는 점이다.

함수를 정의하면 프로토타입 객체가 정의되고 그 객체의 멤버로 constructor 속성을 가지게 된다.

constructor 속성은 프로토타입 객체를 생성했던 함수에 대한 참조를 나타낸다.

아래 예제를 보자.

function SoccerPlayer(name, position) { 
  this.name = name;
  this.position = position; 
  this.whatIsYourName = function () {
    return "My name is " + this.name;
  };
  this.whatIsYourPosition = function () { 
    return "My position is " + this.position;
  }; 
}
var player = new SoccerPlayer("Park Ji Sung", "Wing Forward");

player.whatIsYourName();
// "My name is Park Ji Sung"
player.whatIsYourPosition();
// "My position is Wing Forward"
var player2 = new player.constructor("Messi");

player2.name;
// "Messi"

두번째 코드블럭에서, SoccerPlayer라는 생성자 함수를 통해 새로운 객체 player를 생성하고 메소드를 실행했음을 알 수 있다.

이제 player 객체는 constructor라는 속성을 저절로 갖게 된다. constructor는 생성자 함수 SoccerPlayer를 가리키는 참조값이므로, 생성자 함수를 몰라도 프로토타입 객체만 있으면 언제든지 같은 구조를 가진 새로운 객체를 생성할 수 있는 것이다.

3. 참고

PreviousJavaScript & C 문법 비교NextCSS

Last updated