[TIL] 2021.03.02

이머시브 과정 2주차 첫날이 되었다.
오늘은 저번주에 하던 beesbeesbees과제를 이어서 끝내고
Subclass Dance Party라는 새로운 과제에 돌입하였다.
삼일절로 인해 어제 하루 쉬어서 주말포함 3일간 연휴를 보내고 하려니 조금 힘든감이 없지 않아 있던거 같다...(그렇다고 연휴기간동안 놀기만 한건 아니다^^...) 오늘 과제를 진행하며 기억해야할 부분을 블로깅 하며 되새겨보자 !

이건 꼭 기억하자❗

es5를 사용 할 때

상속을 할 때 부모 객체를 복사 하여서 상속을 줘야한다.
그렇지 않으면 상속받는 객체에서 메소드를 추가하거나 변화를 줄때 부모 객체에도 영향을 받는다.

var Person = function(name) {
   this.name = name;
}

var Student = function(name) {
  Person.call(this, name);
}

Student.prototype = Object.create(Person.prototype);
// 이때 Student.prototype = Person.prototype 을 하게되면
// Student에 Person을 그대로 할당해 준거라 Person에도 영향을준다

상속을 할 때 constructor을 명확히 해야한다.

var Person = function(name) {
   this.name = name;
}

var Student = function(name) {
  Person.call(this, name);
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
// 위 처럼 하지 않을시 constructor는 Person이 된다.

상속받은 메소드를 사용하는 방법

var Person = function(name) {
  this.name = name;
} 
Person.prototype.eat = function() {console.log(this.name + "자는중입니다...")}

var Student = function(name) {
  Person.call(this, name);
}
Student.prototype = Dancer.prototype.step.call(this)Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.eat = function() {
Student.prototype.eat.call(this)
}
// 상속 받을 메소드를 call을 사용하여 불러온다.

es6를 사용 할 때

상속받은 메소드 사용하는 방법

class Person {
  constructor(name) {
     this.name; 
  }
  eat() {
     console.log(this.name + "자는중입니다...")   
  }
}

class Student extends Person {
   constructor(name) {
     super(name); 
   }
   eat() {
     super.eat(this)
   }
}
// 상속 받을 메소드를 super를 사용하여 불러온다.

하루를 마치며👋

beesbeesbees과제를 진행할때는 크게 어려운 부분이 없어서 그래도 나쁘지 않게 이해를 했구나 싶었는데 Subclass Dance Party과제를 할 때 멘붕이었다... 과제진행 전에 잠깐 sprint review시간에 조금 설명을 해주셨는데 막상 코드를 작성하려니 같이 페어를 진행했던 분과 멘붕이었다...🙀 시간이 조금 걸리긴했지만 es5와es6로 여러점이 찍히면서 반짝이게끔 구현을 하는데 성공은 했다. 오늘 자기전에 다시 코드를 보며 복습해야겠다.
그리고 코드를 작성하면서 스펠링이 틀리거나 저장을 안하는 실수를 하는 횟수도 무시 못 할꺼같다. 자자한 코드를 작성할때라도 신중히 하고 확인하기전에 다시한번 검토해보는 습관을 가져야 할 꺼 같다 !