class선언, class사용법, extends, 부모의 생성자를 받는 super, 부모의 함수를 받는 super 예쩨

Class 정의섹션

Class는 사실 함수입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언 두 가지 방법을 제공합니다.

Class 선언섹션

class를 정의하는 한 가지 방법은 class 선언을 이용하는 것입니다. class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 합니다.

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

Hoisting

함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 것입니다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 하며, 그렇지 않으면, 다음 아래의 코드는 ReferenceError 에러를 던질 것입니다. :

var p = new Polygon(); // ReferenceError

class Polygon {}

Class 표현식섹션

class 표현식은 class를 정의 하는 또 다른 방법입니다. Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있습니다. 기명 class 표현식에 주어진 이름은 클래스의 body에 대해 local scope에 한해 유효합니다.

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Class body 와 method 정의섹션

Class body는 중괄호 {} 로 묶여 있는 안쪽 부분입니다.. 이곳은 여러분이 method나 constructor와 같은 class members를 정의할 곳입니다.

Strict mode섹션

클래스 선언과 클래스 표현식의 본문(body)은 strict mode 에서 실행됩니다.

Constructor (생성자)섹션

constructor 메소드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드입니다.  "constructor" 라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 한 개를 초과하는 constructor 메소드를 포함한다면, SyntaxError 가 발생할 것입니다.

constructor는 부모 클래스의 constructor 를 호출하기 위해 super 키워드를 사용할 수 있습니다.

Prototype methods섹션

method definitions도 참조해보세요.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

Static methods섹션

static 키워드는 클래스를 위한 정적(static) 메소드를 정의합니다. 정적 메소드는 클래스의 인스턴스화(instantiating) 없이 호출되며, 클래스의 인스턴스에서는 호출할 수 없습니다. 정적 메소드는 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는데 주로 사용됩니다.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

 

Boxing with prototype and static methods섹션

정적 메소드나 프로토타입 메소드가 this 값 없이 호출될 때, this 값은 메소드 안에서 undefined가 됩니다. class 문법 안에 있는 코드는 항상 strict mode 로 실행되기 때문에 이동작은 "use strict" 명령어가 없더라도 같습니다.

 

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

위에 작성된 전통적 방식의 함수기반의 구문으로 작성된 경우, 메서드 호출에서의 오토박싱은 초기값 기준의 non-strick mode로 발생하게 됩니다.  만일 초기값이 undefine,이면, 이것은 전역객체로 설정됩니다.

Autoboxing은 strict mode 에서 발생하지 않으며, 이값은 그대로 유지됩니다.

function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

Instance properties섹션

인스턴스 속성은 반드시 클래스 메서드 내에 정의되어야 합니다.:

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

정적 클래스사이드 프로퍼티와 프로토타입 데이터 프로퍼티는 반드시 클래스 선언부 바깥쪽에서 정의되어야 합니다. 

Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;

 

 

 

extends를 통한 클래스 상속(sub classing)섹션

extends 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용됩니다.

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

subclass에 constructor가 있다면, "this"를 사용하기 전에 가장 먼저 super()를 호출해야 합니다.

또한 es5에서 사용되던 전통적인 함수 기반의 클래스를 통하여 확장할 수도 있습니다.

function Animal (name) {
  this.name = name;  
}
Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak();

클래스는 생성자가 없는 객체(non-constructible)을 확장할 수 없습니다. 만약 기존의 생성자가 없는 객체을 확장하고 싶다면, 이 메소드를 사용하세요. Object.setPrototypeOf():

var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' barks.');
  }
}
Object.setPrototypeOf(Dog.prototype, Animal);

var d = new Dog('Mitzie');
d.speak();

Sub classing built-in objects섹션

TBD

Species섹션

아마 배열을 상속 받은 MyArray 클래스에서 Array를 반환하고 싶을 것입니다. Species 패턴은 기본 생성자를 덮어쓰도록 해줍니다.

예를 들어, map()과 같은 기본 생성자를 반환하는 메서드를 사용할 때 이 메서드가 MyArray 객체 대신 Array 객체가 반환하도록 하고 싶을 것입니다. Symbol.species 심볼은 이러한 것을 가능하게 해줍니다:

class MyArray extends Array {
  // 부모 Array 생성자로 종류 덮어쓰기
  static get [Symbol.species]() { return Array; }
}
var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);

console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

super 를 통한 상위 클래스 호출섹션

super 키워드는 객체의 부모가 가지고 있는 함수들을 호출하기 위해 사용됩니다..

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES5 프로토타입 상속 문법과 ES6 클래스 상속 문법의 비교섹션

ES6 (ES2015):

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES5:

function Cat(name) {
  this.name = name;
}

Cat.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
};

function Lion(name) {
  // `super()` 호출
  Cat.call(this, name);
}

// `Cat` 클래스 상속
Lion.prototype = Object.create(Cat.prototype);
Lion.prototype.constructor = Lion;

// `speak()` 메서드 오버라이드
Lion.prototype.speak = function () {
  Cat.prototype.speak.call(this);
  console.log(this.name + ' roars.');
};

 

 

Mix-ins섹션

추상 서브 클래스 또는 믹스-인은 클래스를 위한 템플릿입니다. ECMAScript 클래스는 하나의 단일 슈퍼클래스만을 가질 수 있으며, 예를 들어 툴링 클래스로부터의 다중 상속은 불가능합니다. 기능은 반드시 슈퍼클래스에서 제공되어야 합니다.

슈퍼클래스를 인자로 받고 이 슈퍼클래스를 확장하는 서브클래스를 생성하여 반환하는 함수를 사용하여 ECMAScript에서 믹스-인을 구현할 수 있습니다:

아래는 두 함수는 어떤 클래스를 인자로 받고 그 클래스를 상속한 새로운 익명 클래스를 리턴하는 arrow function 입니다.

var calculatorMixin = Base => class extends Base {
  calc() { }
};

var randomizerMixin = Base => class extends Base {
  randomize() { }
};

위 믹스-인을 사용하는 클래스는 다음과 같이 작성할 수 있습니다:

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

app.js

global.__basedir = __dirname;

console.log(__basedir);

const ChildClassTest = require(__basedir+'/childClassTest');

const config = {

USER_NAME: "d792a48c-7d3e-4443-a8f8-4d58118fe3a3",

PASSWORD: "d0SSvo5SpGf0",

VERSION: "2017-05-26",

WORKSPACE_ID: "40ad6d1b-a0d8-4681-abbc-c989a852939f",

EXPIRE_SEC: 120,

TIMEZONE: "Asia/Tokyo",

INIT_INTENT: "やめる",

GIVEUP_SORRY_MSG: "",

SYSTEM_MESSAGE: "",

CLIENT_ACCESS_TOKEN:"clientAccessTokenForTest"

}

const childClassTest = new ChildClassTest(config);

console.log(childClassTest.getInitIntet());

console.log(childClassTest.getUserName());

console.log(childClassTest.getClientAccessToken());

console.log(childClassTest.getWorkspaceId());

//やめる

//d792a48c-7d3e-4443-a8f8-4d58118fe3a3

//clientAccessTokenForTest

//40ad6d1b-a0d8-4681-abbc-c989a852939f

ChildClassTest.js

'use strict';

const ParentClassTest = require(__basedir+'/parentClassTest');

console.log(ParentClassTest);

class childClassTest extends ParentClassTest{

constructor(config) {

super(config);

this.init_intent = config.INIT_INTENT;

this.user_name = config.USER_NAME;

}

getInitIntet(){

return this.init_intent;

}

getUserName(){

return this.user_name;

}

getClientAccessToken(){

return this.client_access_token;

}

getWorkspaceId(){

return super.getWorkspaceId();

}

}

module.exports = childClassTest;

・super(config): 부모 클래스의 생성자를 모두 받아온다.  부모를 상속해서 사용하므로 부모의 생성자를 만족시켜주어야 한다. 따라서 부모의 상속을 받는 자식에서 부모의 초기화를 실행한다.

・super.getWorkspaceId();:부모 클래스의 메서드를 받아온다. getWorkspaceId를 childClassTest에서 또 선언해주지 않아도 부모의 메서드를 상속받고 있기 때문에, 부모 클래스의 getWorkspaceId메서드를 사용할 수 있다.

・exports하지 않으면 외부에서 require할 수 없다.

ParentClassTest.js

'use strict';

class parentClassTest{

constructor(config){

this.config = config;

this.client_access_token = config.CLIENT_ACCESS_TOKEN;

this.workspace_id = config.WORKSPACE_ID;

}

getWorkspaceId(){

return this.workspace_id;

}

}

module.exports = parentClassTest;