Pseudoclassical vs ES6

1. psedoclassical instantiation

1) 기본 형식

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

2) prototype 생성

Human.prototype.eat = function(food){
  console.log(`${this.name}은(는) ${food}를 먹고 있군요.`);
}

/*let chulsu = new Human(chulsu,20); => chulsu = [name : chulsu, age: 20]
chulsu.eat('치킨') = 'chulsu은(는) 치킨을 먹고 있군요.';
*/

3) 상위 폼을 상속받기

const Student = function(name,age,position){
  Human.call(this,name,age)
  /*2가지 추가 방법이 있다.
  1. Human.call(this,[name,age])
  
  2. function(...args){
  Human.call(this,...args)
  .
  .
  .
  }
  */
  this.positon = position;
}

4) prototype을 상속받기 => call, apply 사용

Student.prototype = Object.create(Human.prototype);

만약 Student.prototype = Human.prototype을 하게 되면 어떻게 될까?

처음에는 Student.prototype은 Human.protytype과 같아집니다.
하지만 Human.prototype도 Student.prototype을 바라보게 됩니다.

그래서 Student에서 prototype을 새로 정의하면 Human에도 적용이 되게 됩니다.

따라서 Object.create를 통해 Human.prototype을 prototype으로 가지게 되는 새로운 배열을 만들어서 Shallow Copy를 해야 하는 것입니다!
(즉 원본인 Human.prototype은 Student에서 고쳐도 변하지 않습니다.)

Student.prototype.constructor = Student

이것을 써주는 이유는 Object.create를 통해 만들어진 Student.prototype은 아직 Human을 바라보고 있기 때문입니다.

따라서 Student를 바라볼 수 있도록 constructor에 Student를 할당해야 합니다.

5) Pseudoclassical 정리

const Human = function(name, age){
  this.name = name;
  this.age = age;
}
Human.prototype.eat = function(food){
  console.log(`${this.name}은(는) ${food}를 먹고 있군요.`);
}

const Student = function(name,age,position){
  Human.call(this,name,age);

  this.positon = position;
}

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;

Student.prototype.learn = function(subject){
  console.log(`${this.name}은(는) ${subject}를 공부하고 있군요.`);
}

/*let mike = new Student('mike',25,'management')
  mike.eat('pizza') => 'mike은(는) pizza를 먹고 있군요.'
  mike.learn('marketing') => 'mike은(는) marketing을 공부하고 있군요.'
*/

주의할 점 :
Psedoclassical 방법으로 작성시 arrow function을 사용하면 안됩니다!
this가 생성자를 인식하지 못해서 에러가 나기 때문입니다.

2. ES6 class

위의 과정이 너무 복잡하여 주로 사용하는 방법은 ES6입니다.

1) 생성과 prototype 입력

class Human {
  constructor(name,age){
    this.name = name;
    this.age = age
  }
  eat(food){
    console.log(`${this.name}은(는) ${food}를 먹고 있군요.`);
  }
}

2) 상위 폼을 상속 => superclass라고 한다.( super() 사용)

class Student extends Human{ // Human을 상위 폼으로 상속해준다.
  constructor(name,age,position){
    super(name,age);
    this.position = position;
  }
}

이렇게 위의 prototype의 복잡한 상속 과정을 줄일 수 있어서 더 효율적입니다.

3) ES6 정리

class Human {
  constructor(name,age){
    this.name = name;
    this.age = age
  }
  eat(food){
    console.log(`${this.name}은(는) ${food}를 먹고 있군요.`);
  }
}

class Student extends Human{ // Human을 상위 폼으로 상속해준다.
  constructor(name,age,position){
    super(name,age);
    this.position = position;
  }
  learn(subject){
    console.log(`${this.name}은(는) ${subject}를 공부하고 있군요.`);
  }
}
/*let mike = new Student('mike',25,'management')
  mike.eat('pizza') => 'mike은(는) pizza를 먹고 있군요.'
  mike.learn('marketing') => 'mike은(는) marketing을 공부하고 있군요.'
*/