2019-05-22 클래스, 모듈, DOM

클래스

constructor 는 생성자함수와 유사한 역할을 한다. 

               0개나 1개만 존재할 수 있다. 

              이 내부에서 프로퍼티 정의를 한다.

// 클래스 선언문
class Person {
  // constructor(생성자)
  constructor(name) {
    this._name = name;
  }

  sayHi() {
    console.log(`Hi! ${this._name}`);
  }
}

// 인스턴스 생성
const me = new Person('Lee');
me.sayHi(); // Hi! Lee

console.log(me instanceof Person); // true

밖에서 me._name 하면 접근이 가능하다. -> public하다.

클래스밖에서 참조할 수 있으면 , public하다.

클래스내에서만 참조할 수 있는건, private하다.

 

클래스가 생성되는 시점은 런타임 이전이다. (런타임 이전이면, 호이스팅이 발생)

(*** let나 const는 선언문을 만났을때 초기화가 이루어진다. 만나기 이전까지는 TDZ(일시적 사각지대)에 빠진다. 그래서 에러발생)

클래스의 호이스팅은 let, const와 같다.

 

// 클래스 선언문
class Person {
  // constructor(생성자). 이름을 바꿀 수 없다.
  constructor(name) {
    // this는 클래스가 생성할 인스턴스를 가리킨다.
    // _name은 클래스 필드이다.
    this._name = name;
  }
}

// 인스턴스 생성
const me = new Person('Lee');
console.log(me); // Person {_name: "Lee"}

 

this._name은 클래스 필드이다.

 

정적 메소드

클래스의 정적(static) 메소드를 정의할 때 static 키워드를 사용

 

class Foo {
  constructor(prop) {
    this.prop = prop;
  }

  static staticMethod() {
    /*
    정적 메소드는 this를 사용할 수 없다.
    정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다.
    */
    return 'staticMethod';
  }

  prototypeMethod() {
    return this.prop;
  }
}

// 정적 메소드는 클래스 이름으로 호출한다.
console.log(Foo.staticMethod());

const foo = new Foo(123);
// 정적 메소드는 인스턴스로 호출할 수 없다.
console.log(foo.staticMethod()); // Uncaught TypeError: foo.staticMethod is not a function

정적메소드는 인스턴스 없이 호출할 수 있도록 만들었다. 반드시 인스턴스를 생성한 다음에 호출

 

8. 클래스 상속

class Child extends Parent {
  // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
  constructor() {}
}

클래스 내부에서 부모를 상속할때 super키워드를 써야한다. 

자식 클래스의 constructor에서 super()를 호출하지 않으면 this에 대한 참조 에러(ReferenceError)가 발생한다.

 

 

 

모듈

아직 쓰기엔 시기상조이다.

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

위처럼 쓰면, 파일레벨 스코프를 가진다.

script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. 모듈의 파일 확장자는 mjs를 권장한다.

 

Babel ES6로 코딩해서 마음껏 쓰더라도 ES5로 떨어뜨려주는것

Webpack 100개의 파일을 하나의 파일로 묶어주면서 불필요한 space 제거해서 한줄로 나열.

 

DOM(Document Object Model)

DOM Api를 활용하여 태그나 스타일을 추가 변경 조작한다.

라이브러리나 프레임워크의 도움을 받는것이 퍼포먼스향상에 도움을 준다.

jquery는 크로스브라우징을 알아서 해준다.

하지만, 모던한 자바스크립트에서는 jquery쓰지 않는다.

왜냐하면 SPA 식으로 추세가 바뀌었기떄문에 

SPA(single page aplication) html은 하나만 만들고, 부속페이지 조각들이 js에 들어가있음.

그래서 앵귤러, 리액트, vue.js 가 뜨고있음.