Class

📌 Class (생성자 함수의 ES6 스펙)

⬅️ 생성자 함수를 통한 객체 생성(복습)

const User = function (name, age) {
    this.name = name;
    this.age = age;
    this.showName = function () {
       console.log(this.name);  
  };
};

const mike = new User(‘Mike’, 30);
console.log(mike); // { name: ‘Mike’, age: 30, showName: [Function(ananymous)] }

➡️ class 키워드를 통한 객체 생성(ES6)

class User2 {
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
    showName() {
        console.log(this.name); 
    }
}

const tom = new User2(‘Tom’, 19);
console.log(tom); { name: ‘Tom’, age: 19 }
// 위 예제와 달리 class 에서 객체를 찍어보면 메서드는 보이지 않음

• new로 호출 했을때 내부에 정의된 내용으로 객체를 생성하는 것은 동일하다.
• class 키워드와 constructor(생성자) 메서드를 사용한다.
• showName() 처럼 class 내에 정의한 메서드는 User2 프로토타입(상위객체)에 저장 된다.‘
• 때문에 mike는 객체 내부에 showName()이 있다.
• tom은 프로토타입 내부에 showName()이 있다.
• 호출하는 방법은 둘다 mike.showName(), tom.showName()으로 동일하다.

🔔 class가 아닌 생성자 함수로 prototype에 메서드 만들어 class와 동일하게 동작하게 만들기

const User3 = function (name, age) {
    this.name = name;
    this.age = age;
}

User3.prototype.showName = function () {
    console.log(this.name);
}

const jimmy = new User3 (‘Jimmy’, 25);

console.log(jimmy); // { name: ‘Jimmy’, age: 25 }

// 위와같이 작성 시 class와 마찬가지로 메서드가 prototype으로 할당된다.

💡단순히 문법의 편의성 때문에 class를 사용하는걸까?

• 각 방식에서 호출시 new를 빼고 호출한다면?

// 생성자 함수
const User = function (name, age) {
    this.name = name;
    this.age = age;
    this.showName = function () {
       console.log(this.name);  
  };
};

const mike = User(‘Mike’, 30);

console.log(mike); // undefined

👉 new 를 빼고 호출시 undefined를 반환한다. (에러가 안남)

// class
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    showName() {
        console.log(this.name);
    }
}

const eddy = User(‘Eddy’, 17); // TypeError

👉 new를 빼고 호출시 TypeError를 반환함 (에러 발생)
이는 인적실수로 인한 원하지 않는 동작을 방지 할 수 있다.

• for ..in 문으로 순회 할 시 메서드가 포함 될까?

// 바로 위 예시 코드에 이어서
for (let key in eddy) {
    console.log(key);
}

// name, age

👉 class 내부에 선언한 메서드는 for..in문에서 제외된다.
👉 생성자 함수에서는 객체가 가지고 있는 프로퍼티만 확인 하기 위해 hasOwnProperty() 메서드를 사용해야만 했지만 class는 그럴 필요가 없다.

📌 상속

생성자 함수는 prototype으로 상속 구현
class는 extend 키워드를 사용

class Car {
    constructor(color) {
        this.color = color;
        this.wheels = 4;
    }
    drive () {
        console.log(“drive…”);
    }
}

class Bmw extend Car {
    stop () {
        console.log(“stop!”);
    }
}

const x5 = new Bmw(‘blue’);
console.log(x5); // { color: ‘blue’, wheels: 4  }
x5.drive(); // ‘drive…’
x5.stop(); // ‘stop!’

• 위 코드를 보면 Car를 상위 클래스로 보고 이를 상속 받아 Bmw 클래스가 생성자 역할을 하여 x5를 생성한다.

• 부모 클래스의 프로퍼티나 메서드를 상속받아 사용이 가능하다.

• drive()를 호출한다고 하면 우선 x5 객체에서 찾고 없으면 prototype에서 찾고 여기에도 없으면 부모 클래스의 prototype에서 찾는다.

• 위에도 설명 했듯이 class 키워드는 기본적으로 메서드를 프로토타입에 저장한다.
  

  📍이미지 출처 : 코딩앙마 유튜브

• 위 이미지에서 보듯이(객체의 프로퍼티와 이름은 다름) 생성된 객체의 프로토타입으로 메서드가 들어가있고 그 프로토타입으로 최상위 객체의 메서드가 들어가 있다. (설명을 어떻게 해야할지 모르겠다)

📌 method overriding (메서드 오버라이딩)

🔔 만약 부모의 메서드와 동일한 이름의 메서드가 있다면 ?

class Car {
    constructor(color){
         this.color = color;
    }
    drive() {
        console.log(“drive…”);
    }
    stop() {
        console.log(“stop!”);
    }
}

class Audi extend Car {
    stop() {
       console.log(“OFF”);
    }
}

const a8 = new Audi (“gray”);
a8.stop(); // OFF

• 위 예시에서 보듯이 부모 메서드와 자식 메서드의 이름이 동일하다.
• 이 경우 자식 메서드로 덮어 씌워진다.

👉 만약 부모의 메서드를 그대로 사용하면서 확장 하고 싶다면 super라는 키워드를 사용하면 된다.

class Car {
    constructor(color){
         this.color = color;
    }
    drive() {
        console.log(“drive…”);
    }
    stop() {
        console.log(“stop!”);
    }
}

class Audi extend Car {
    stop() {
       super.stop(); // 이 부분 코드가 추가됨
       console.log(“OFF”);
    }
}

const a8 = new Audi (“gray”);
a8.stop(); // “stop!” “OFF”

• super 의 동일한 이름의 메서드stop()을 호출하면 덮어 씌우지 않고 확장이 가능하다.

📌 class overriding(생성자 오버라이딩)

class Car {
    constructor(color) {
        this.color = color;
    }
    drive() {
         console.log(“drive…”);
    }
}

class Benz extends Car {
    this.navigation = 1;
}

const sclass = new Benz (white);

console.log(sclass); // error

• 자식 클래스에서 새로운 프로퍼티를 추가 한다.
• 자식 클래스는 constructor가 없다.
• 위 코드처럼 작성시 error가 발생한다.

class Car {
    constructor(color) {
        this.color = color;
    }
    drive() {
         console.log(“drive…”);
    }
}

class Benz extends Car {
    constructor() {           // constructor 추가
        super();              // super 키워드 추가
        this.navigation = 1;
    }
}

const sclass = new Benz (white);

console.log(sclass); // { color: undefined, navigation: 1 }

• constructor 및 super() 메서드가 추가 되었다.
• 자식 클래스에서 추가된 프로퍼티는 정상적으로 추가되었다.
• 부모 클래스에서 매개변수로 받은 color값이 undefined로 찍힌다.
• 부모 클래스에서 받은 인자를 그대로 받아와야 한다.

class Car {
    constructor(color) {
        this.color = color;
    }
    drive() {
         console.log(“drive…”);
    }
}

class Benz extends Car {
    constructor(color) {           // 인수 추가
        super(color);              // 인수 추가
        this.navigation = 1;
    }
}

const sclass = new Benz (white);

console.log(sclass); // { color: white, navigation: 1 }

• 자식 클래스에 constructor에 color를 전달해 주니 정상적으로 출력된다.