클래스

extends를 쓰고 constructor가 있는 클래스와 없는 클래스

class A {
  constructor($target, props = {}) {
    console.log($target, props);
  }
}
class B extends A {
  constructor($target, props = {}) {
    super($target,props);
  }
}

new B(`<div></div>`);

or

class A {
  constructor($target, props = {}) {
    console.log($target, props);
  }
}
class B extends A {}

new B(`<div></div>`,1000);

위의 둘은 같은 결과로
첫번째는 extends된 A에 대해 super를 통해 값을 전달해주고
두번째는 extends된 A에 대해 자식클래스인 B는 constructor가 없어서
그위인 A에서의 constructor로 해당 생성한 new B('<div></div>');부분의 매개변수가 $target으로 전달되는 것을 알 수 있다.

모듈로 분리한 상태에서 인스턴스 생성하기

• 1.js

import { A } from "./3.js";
class B {
  constructor() {
    let a = new A();
    let b = new A();
    console.log(a, b);
  }
}

new B();

• 3.js

class A {
  constructor() {
    this.a = 100;
    this.b = 1000;
  }
}

export { A };

• 결과

A {a: 100, b: 1000}
a: 100
b: 1000
__proto__: Object

각각 위와같은 결과가 나타난다.

이는 클래스 A를 통해 만들어진 인스턴스 a,b는 각각 클래스 A에서의 constructor를 통해 만들어진 a,b 프로퍼티를 얻어온다.

extends 사용할때와 안할때

class A {
  constructor() {
    this.a = 100;
    this.b = 1000;
  }
}

case1)
class B {
  constructor() {
    let a = new A();
    let b = new A();
    console.log(a, b);
  }
}

case2)
class B extends A {
  constructor() {
    super();
    let a = new A();
    let b = new A();
    console.log(a, b);
  }
}

new B();

둘다 console.log 결과는 같지만 다른 점은
A를 방문한 횟수이다.

case1)은 constructor안의 new A()를 통해 2번의 A를 접근을 하였으나

case2)는 extends로 인해 A의 constructor로 한번 접근 후 new A() 를 통해 2번의 A를 접근을 하여 총 3번의 접근을 하였다.

Node.js에서의 js파일끼리 모듈화 방법

크롬으로 index.html에서 module로 1.js 그리고 1.js를 2.js로 import export를 통해 가능은 하나

node.js에서는 1.js 2.js 파일로 모듈화하여 import export가 불가능하다. 대신 1.mjs 2.mjs 형태로 이름을 사용해야 정상적으로 동작한다.

extends로 한 부모클래스 this, new를 통해 만든 클래스의 this

• b.mjs

export class C{
  constructor(){
    console.log(this);
  }
}

extends 부모클래스

• a.mjs

import {C} from './b.mjs'
class B extends C{
  constructor(){
    super()
  }
}

new B();

console.log결과 : B
자식클래스를 통해 올라간 부모클래스에서 this는 기존의 this를 가지므로 자식클래스였던 B를 나타낸다.

new를 통해 만든 클래스 this

• a.mjs

import {C} from './b.mjs'
class B{
  constructor(){
    let b = new C();
  }
}

new B();

console.log결과 : C
new를 통해 만들어진 C 자체이므로 C클래스를 나타냄

C => B => A 클래스 형태에서의 A에서의 this

class A{
  constructor(){
    console.log(this);			// C
  }
}

class B extends A{

}

class C extends B{

}

new C();		

부모클래스에서의 this는 기존의 C를 나타낸다.