[JavaScript] Prototype 그리고 ES6 Classes, Sub Class(Inheritance), super()란?

---

Prototype

hasOwnProperty는 어디서 나왔나요?

현재 user 객체 변수에는 두 개의 속성 (name, age)만 있는데, hasOwnProperty는 어디서 나온것인가?

여기있다.

 

모든 객체는 global Object prototype을 가진다.

 

그러면 이 프로토타입은 무엇일까?

프로토타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 매커니즘을 말함.

이것을 프로토타입 체인(Prototype chain)이라고도 말함.

위에서 보듯이 prototype object 안에 있는 hasOwnProperty를 상속 받아 사용하고있다.

⇒ 이렇게 함으로써 더 적은 메모리를 사용할 수가 있고 코드를 재사용 할 수 있다.

 

 

new를 이용해 클래스를 객체로 만들 수 있다.

---

Object.create()

를 이용해서도 객체의 prototype을 지정해 줄 수 있다.

function Person(name, email, birthday) {
    // person이라는 새로운 객체를 만들게 됨
    const pereson = Object.create(PersonsPrototype);
    pereson.name = name;
    pereson.email = email;
    pereson.birthday = new Date(birthday);
    return pereson;
}

const PersonsPrototype = {
    calculateAge() {
        const diff = Date.new() - this.birthday.getTime();
        const ageDate = new Date(diff);
        return Math.abs(ageDate.getUTCFullYear() - 1970);
    }
}

---

ES6 Classes

ES6에서 나온 Class를 이용해서 더 쉽게 OOP를 구현할 수 있다.

이것은 문법을 OOP 방식을 이용하지만 내부에서 prototype을 사용하며 작동된다.

this는 클래스가 생성할 인스턴스를 가리킨다.

---

Static 사용

“prototype”이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있다. 이런 메서드를 정적(static) 메서드라고 부른다.

 

this.name 같은 것을 안쓰는 독립적인 것을 정의할 때 static을 사용하며

이 static 메서드를 사용할 때는 인스턴스가 아닌 클래스 이름을 이용해 사용한다.

이 코드에서 함수 자체는 class Person이다.

함수 자체는 class Person 임.

 

 

프로토타입에도 없고, 함수 자체 class Person에 있음.

constuctor가 클래스 자체가 있는곳.

 

class Person {
    constructor(name, email, birthday){
        this.name = name;
        this.email = email;
        this.birthday = new Date(birthday);
    }

    // 클래스 문법 사용 - 함수 자체가 프로토타입에 들어감.
    // 프로토타입에 인트로듀스가 들어감.
    introduce() {
        return `Hello my name is ${this.name}`;
    }

    static multipleNumbers(x,y) {
        return x * y;
    }
}

const john = new Person('john', 'john@example.com','10-3-98');
console.log(john);

// introduce사용하려면
john.introduce();

// 클래스 자체에 있는 멀티플넘버스를 사용하려면.
Person.multipleNumbers(1,2)

---

Sub Class(Inheritance)

부모 클래스를 자식 클래스에 확장할 수 있다.

부모 클래스에 있던 기능을 토대로 자식 클래스를 만들 수 있는 것.

⇒ 즉, 부모 클래스에 있던 기능을 자식 클래스가 사용 가능

그렇게 하기 위해서는 extends 키워드를 사용하면 된다.

⇒ 부모 클래스의 속성을 불러올 때 super() 사용

 

관계도

⇒ john이 new Clinet() 임. (객체)

client.introduce(john.introduce)가 실행되는 순서

1. clinet 객체에 client.introduce가 있는지 확인함.
2. 없으므로 Client.prototype에 있는지도 확인함 → introduce는 없음
3. extends를 통해 관계가 만들어진 Client.prototype의 프로토타입인
   Person.prototype에 메서드가 있는지 확인
   → 여기에 introduce가 있으므로 이것을 사용한다.

---

super()란?

Constructor (생성자)

 

 

 

 

constructor(생성자)를 사용하면 인스턴스화된 객체에서

다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 제공할 수 있다.

 

클래스에 new를 붙여서 (new User(”john”))

인스턴스 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행된다.

 

이 때 넘겨받은 인수인 john이 this.name에 할당된다.

 

 

 

 

자바스크립트에서 super 키워드

두가지의 방법으로 사용이 된다.

• 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용됨
• 자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용됨

숫자 순서대로 호출됨. 1→2→…→6