🦎 [딥다이브 스터디] 5th- 22. Class

1. 생성자 함수 Person을 class형으로 변환해보세요.


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

  Person.prototype.sayHi = function () {
    console.log("My name is " + this.name);
  };

  Person.sayHello = function () {
    console.log("Hello");
  };

  return Person;

//class에서는 this 바인딩 끝나고 인스턴스 (this) 반환 but f는 직접 return! 
//class 가 신식! sugar syntax.. oop 개념 도입을 위해..   

})();

//answer 
class Person {

//인스턴스 생성및 초기화 
constructor(name){
this.name = name; }

sayHi(){
console.log(`My name is ${this.name}`) 
}

static sayHello(){
console.log("Hello")}
}

//prototype쓰는 이유?  
// instance생성때마다 함수 호출하면 메모리 누수.. 그래서 씀. obj를 매번 찍어서 메모리를
//사용하는것이 아닌, prototype의 메서드를 참!조! => 이경우 prototype 을 인스턴스가 참조. 메모리 절약. 


//주의할점
//클래스 필드에 함수를 할당하면 안됨. 인스턴스의 메서드가 됨. 프로토 타입의 메서드가 아니라!! 
//원래는 constructor 안의 값만 출력 되고 메서드는 prototype 안에 있음!

2. 아래의 코드에서 문제가 되는 부분 찾고 설명한 뒤, 고쳐보세요.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">0</button>
  </body>
  <script>
    class App {
      constructor() {
        this.$button = document.querySelector(".btn");
        this.count = 0;
        this.$button.onclick = this.increase;
      }

      increase() {
        this.$button.textContent = ++this.count;
      }

/*answer
increase 는 화살표 함수가 아니므로 this 가 DOM (this.$button)을 가리킨다. 
따라서 increase = () => this.$button.textContent = ++ this.content 로 바꿔줘야 
언제나 상위 컨텍스트의 this 를 가리키게 한다. (바인딩)
    
=> this. onclick 에 this.increase가할당되면.. increase 함수 내의 this가 this.button.button 이렇게 됨!
클래스가 아닌 button에 종속되는것. 이 경우 예상과 다른 결과.(count 가 안올라감)가 발생가능.
    
해결책
1. this.button.onclick = this.increase.bind(this)를 constructor에서 해서 바인딩하거나 
2. 화살표함수를  2. ()=>{} 사용해서 바인딩 */

    
} 
    new App();
  </script>
</html>

3. Rectangle 클래스를 상속받아 color를 프로퍼티로 갖는 ColorRectangle 클래스를 생성하세요.

: 프로토 타입 메서드는 기존의 return문을 오버라이딩하여, color가 추가된 문장을 반환해야합니다.코드를 작성한 뒤 생성한 코드를 설명해보세요.

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  toString() {
    return `width = ${this.width}, height = ${this.height}`;
  }
}

//My Answer
class ColorRectangle extends Rectangle {
  constructor(width,height, color){
  //super를 통해 부모에 있는 값을 최초로 불러온다. 
  super(width,height);
  //color는 새로 추가된 인수이므로 추가
  this.color= color;
 }
 toString() {
   
  return super.toString()+`,color = ${this.color}`;
 }
}

Author And Source

이 문제에 관하여(🦎 [딥다이브 스터디] 5th- 22. Class), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leejyart/딥다이브-스터디-5th-22.-Class

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다