💊  상속과 프로토타입 ( prototype )

객체를 생성하는 3가지 방법 중 하나를 살펴보자 아래의 코드를 이용하여 person1, person2, person3를 더 만들 수 있다. 그러나 여기에 name , age는 다를 수 있으나 sayHello 메소드를 모두 같은 역할을 수행한다.

그러므로 이 메소드를 하나만 선언하고 모두 공유하면 메모리를 절약할 수 있을 것이다 이때 sayHello메소드를 prototype으로 지정하는 것이다.

function Person(name,age){
	this.name=name;
	this.age = age;
  this.sayHello = function(){
	   console.log(` Hello ${this.name}`);   
  }
};

var person1= new Person('Jane',30)
var person2= new Person('Tom',30)
var person3= new Person('John',30)
console.log(person1)
console.log(person2)
console.log(person3)

Person.prototype.sayHello = function(){
	   console.log(` Hello ${this.name}`);   
  }

💊  아래 2개의 코드를 비교해 보자

특별히 할당하지 않더라고 모든 함수는 기본적으로 “prototype” 프로퍼티를 갖는데 디폴트 프로퍼티 prototype은 constructor 프로퍼티 하나만 있는 객체를 가리키며 constructor 프로퍼티는 함수자신을 가리킨다. 그러니까 constuctor 프로퍼티는 자바스크립트 엔진이 프로토타입 생성할때 암묵적으로 추가한 프로퍼티이다

const Person =(function (){

  function Person(name){
    this.name = name;
  }
**Person.prototype.sayHello = function(){
    console.log(`Hi, My name is ${this.name}`)
  }**

 return Person;
}());
const me = new Person('Lee');

>Person.prototype 
// {sayHello: ƒ, constructor: ƒ}
>Person.constructor === Person  // false
>me.constructor === Person // ture
>me.constructor === Object // false

const Person =(function (){

 function Person(name){
    this.name = name;
  }
**Person.prototype ={
  sayHello(){
    console.log(`Hi, My name is ${this.name}`)
  }**
}
 return Person;
}());
const me = new Person('Lee');

>Person.prototype   // {sayHello: ƒ}
>Person.constructor === Person // false
**>me.constructor === Person // false
>me.constructor === Object // true**

옆의 코드는 디폴트 prototype를 덮어써서 constructor가 없어진것이다. 그래서 아래처럼 코드를 바꾸면

Person.prototype ={
  constructor : Person,
  sayHello(){
    console.log(`Hi, My name is ${this.name}`)
  }
}

**>me.constructor === Person // ture  
>me.constructor === Object // fasle가 나온다**

💊 extends 로 생성한 객체에 constructor를 생성하게 되면

class Car{
  constructor(color){
    this.color= color;
    this.wheels =4;
  }
  drive(){
    console.log('DRIVE')
  }
  stop(){
    console.log('STOP')
  }
}

class Bmw extends Car{
  constructor(color){
  // super(color); 부모객체의 형식대로 
    this.navi = 1; //  에러
  }

  park(){
    console.log('PARK')
  }
  stop(){
    super.stop();
    console.log('stop...')
  }
}
const x5 = new Bmw('red')

class에서 constructor 생성할때 먼저 빈 객체 { }를 만들고 this 로 이 객체를 가리키게 된다. 그런데 extends 를 사용한 객체는 이과정을 건너뛰기 때문에 반드시 super()를 사용하여 constructor를 실행해야 한다.

만약 자식 객체에 contructor가 없다면 암묵적으로 부모의 contructor를 실행한다

class Bmw extends Car{
constructor(...args){
	super(...args);
}

💊 constructor 를 재 정의

function Shape(){
}

Shape.prototype.duplicate = function(){
   console.log('duplicate')
}

function Circle(radius){
   this.radius = radius;
}
// 나중에 여기에 추가
Circle.prototype.draw = function(){
   console.log('draw')
}

const s = new Shape()
const c = new Circle(1)