> For the complete documentation index, see [llms.txt](https://hidaehyunlee.gitbook.io/fork-my-brain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hidaehyunlee.gitbook.io/fork-my-brain/web/javascript/javascript.md).

# JavaScript 객체 지향의 특징

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

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

* **객체 (Instance)**&#x20;
  * `특징` == `속성(Property)` == `변수`
  * `동작` == `메소드(Method)` == `함수`

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

## 1. 프로토타입(Prototype)

```javascript
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` 속성은 프로토타입 **객체를 생성했던 함수에 대한 참조**를 나타낸다.

아래 예제를 보자.

```javascript
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;
  }; 
}
```

```javascript
var player = new SoccerPlayer("Park Ji Sung", "Wing Forward");

player.whatIsYourName();
// "My name is Park Ji Sung"
player.whatIsYourPosition();
// "My position is Wing Forward"
```

```javascript
var player2 = new player.constructor("Messi");

player2.name;
// "Messi"
```

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

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

## 3. 참고

* [생활코딩/prototype](https://opentutorials.org/module/532/6573)
* [생활코딩/객체지향 프로그래밍](https://opentutorials.org/module/570/5102)
* <https://webclub.tistory.com/392>