자바스크립트는 프로토타입 기반의 완전한 객체 지향 언어이다. 객체 컨셉의 개념을 정리하자면 아래와 같다.
특징
== 속성(Property)
== 변수
동작
== 메소드(Method)
== 함수
즉, 객체는 서로 연관된 변수와 함수를 그룹화한 그릇이라고 할 수 있다. 이 글에서는 자바스크립트 객체만의 특징을 정리했다.
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) = 공통으로 가지는 메소드를 저장해놓는 별도의 메모리 공간 = 프로토타입 " 이라고 이해했다.
그렇다면 생성자 함수가 정확히 뭔지 이해할 필요도 있을 것 같다.
생성자는 객체를 생성할 때 최초로 호출되는 함수를 의미한다. 즉, 생성자는 객체를 만드는 역할을 하는 함수다.
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를 가리키는 참조값이므로, 생성자 함수를 몰라도 프로토타입 객체만 있으면 언제든지 같은 구조를 가진 새로운 객체를 생성할 수 있는 것이다.