[ES6]객체와 객체지향프로그래밍

용어(Terminology)섹션

Class

객체의 특성을 정의

Object

Class의 인스턴스

Property

객체의 특성(예: 색깔)

Method

객체의 능력(예: 걷기)

Constructor

인스턴스화 되는 시점에서 호출되는 메서드

Inheritance

클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.

Encapsulation

클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)

Abstraction

복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.

Polymorphism

다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.

객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented programming를 참고하면 된다.

객체지향프로그래밍의 정의를 직접적으로 읽는 것보다 

이 용어들이 왜 나왔는지, 왜 필요한지 하나하나 살펴보는 것이 이해하기 더 편한거 같다.

ECMAScript 5의 클래스

function PersonType(name) {
    this.name = name;
}
PersonType.prototype.sayName = function() {
    console.log(this.name);
};
let person = new PersonType("Nicholas");
person.sayName();   // outputs "Nicholas"
console.log(person instanceof PersonType);  // true
console.log(person instanceof Object);      // true

ES5까지는 클래스란게 없었다고 한다.

그래서 대신 함수(생성자)를 만들어서 생성자의 프로토타입에 메소드를 할당하는 것으로 사용자 정의 타입생성이라고 한다 했단다.

일단 PersonType을 그냥 함수가 아니라 생성자 함수 라고 부르는듯 하다. 타입은 그대로 "function"이다.

이 생성자 함수는 prototype을 가지고 있는데 까보면 다음과 같다. 프로토타입은 "object" constructor(생성자)와 __proto__라는 속성값을 가진다.

이후에

prototypes에 sayName이라는 함수를 추가하게 되는데, 이는 곧 PersonType 객체의 모든 인스턴스에 의해 공유될꺼임

여기서 PersonType은 함순데! 객체를 반환하는 함수네!

아.. PersonType은 클래스의 역할을 한다는 것은 결국

new 연산자를 통해서 여러가지 객체 형태를 띄는 인스턴스들을 만들어 내기 때문이구나! 라는 것을 알게 됨

person은 PersonType의 생산품(인스턴스)이자 Object가 됨

그리고 이 person을 까보면

  

PersonType이라는 커다란 속성을 가지고

그 안에 name과 __proto__를 가지고(이는 원래 PersonType이 가지고 있던 것)

그리고 이 __proto__에는 sayName 함수가 남아 있음....ㅋㅋㅋㅋ

그니까 생산품들한테 새로운 기능들을 추가 한 것들이 저기 추가 된 거임

왜 PersonType에서 미리 정의해주지 않고

prototype을 통해서 전달했는지는 알 수가 없네.,.

ECMAScript 6의 클래스

class PersonClass {
    // PersonType 생성자와 동일합니다.
    constructor(name) {
        this.name = name;
    }
    // PersonType.prototype.sayName과 동일합니다.
    sayName() {
        console.log(this.name);
    }
}
let person = new PersonClass("Nicholas");
person.sayName();   // outputs "Nicholas"
console.log(person instanceof PersonClass);     // true
console.log(person instanceof Object);          // true
console.log(typeof PersonClass);                    // "function"
console.log(typeof PersonClass.prototype.sayName);  // "function"

함수가 아닌 class를 정의했다.

결과는 다음과 같은데

class의 타입은 class가 아니라 function이다.

class를 만들면

constrouctor를 통해서 인스턴스를 만들 틀을 만들고

위와 같이 prototype을 건드리지 않고

class 안에 메소드를 넣을 수 있다.

Inheritance(상속)

프로토타입을 이해하면서 우리는 이미 상속의 일면을 봤습니다. 클래스의 인스턴스는 클래스의 기능을 모두 상속합니다. 상속은 한 단계로 끝나지 않습니다. 객체의 프로토타입에서 메소드를 찾지 못하면 자바스크립트는 프로토 타입의 프로토타입을 검색합니다. 프로토타입 체인은 이런식으로 만들어 집니다.

extends로 Car는 Vehicle의 자식으로서 상속받았음

이 때 상속받기위해

super()를 꼭 사용해야함

실제로 Vechicle의 기능인 addPassenager를 Car가 사용하고

Car생성시에 log에 Veicle created도 출력됨

하지만 passengers처럼 그들의 변수들은 각각 별개이고

단방향이기 때문에 vehicle이 car를 사용하지는 못함

Polymorphism(다형성)

별건 아니고.

그냥 Vehicle의 자식이 여러 개 일 수 있다는 거임

Encapsulation(캡슐화)

요점은 클래스에서 무슨일이 벌어지는 지, 또 클래스를 외부에서 수정학지 못하게 만드는 것이 좋다. 라는 것

Abstraction(추상화)

그리고 지금까지 Car나 Vehicle에 비유한 것이 모두 추상화라고 함