4 min to read

[ECMAScript] [번역] ES6 Classes

Featured image

ES6 Classes

객체지향 프로그래밍(OOP) 는 프로젝트를 구성하는 좋은 방법입니다. ES6와 소개된 JavaScript class 문법은 OOP를 더욱 쉽게 만들어 줍니다.

class 문법이 있기 전에도 가능했었습니다. 만약 OOP를 하고자 한다면 생성자 함수를 사용하면 됩니다.

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

var fido = new Dog('Fido');

console.log(fido.name); // 'Fido'

상속을 추가하거나 다른 사용자가 이 함수를 사용할 때 new 키워드 사용을 잊어 버릴때에도 잘 동작합니다.

ES6 문법은 조금 더 장황하지만 그렇게 차이가 없습니다.

class Dog {
  constructor (name) {
    this.name = name;
  }
}


Methods

Prototype Methods

Prototype Methods 는 클래스의 인스턴스에 연결되는 방법입니다. ES6는 우리 class를 더욱 용이하고 읽기 쉽게 만듭니다.

셍성자 함수를 가지고, 우리는 함수의 프로토타입을 직접 수정해야 할 것입니다.

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

Dog.prototype.sayHi = function () {
  return 'woof';
}

ES6 클래스를 사용하여 메서드 정의를 클래스 선언에 직접 추가할 수 있습니다.

class Dog {
  constructor (name) {
    this.name = name;
  }

  sayHi () {
    return 'woof';
  }
}


Static methods

Static 함수는 클래스 자체에 추가되고 인스턴스에 붙이지 않는 방식입니다.

class Dog {
  constructor (name) {
    this.name = name;
  }

  static isDog (animal) {
    return Object.getPrototypeOf(animal).constructor.name === this.name;
  }
}

var fido = new Dog('Fido');

fido.isDog; // undefined

Dog.isDog(fido); // true


New Keyword Protection!

앞서 언급했듯, 생성자 함수는 매우 잘 동작 합니다. 그러나 문제가 발생할 수 있는 한 가지 예시는 new 키워드 없이 호출하는 경우입니다. 이러한 일이 발생한다면, 새 객체를 생성하는 대신 이 함수가 일반 함수처럼 동작을 하고, window 라는 브라우저의 글로벌 객체의 속성에 추가됩니다.

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

// missing new keyword
var fido = Dog('Fido');

console.log(fido); // undefined :(
console.log(window.name); // 'Fido' :(

ES6 클래스의 좋은 특징 중 하나는 생성자 함수가 new 키워드를 사용할 때만 호출된다는 것입니다.

class Dog {
  constructor (name) {
    this.name = name;
  }
}

var fido = Dog('Fido');  // Class constructor Dog cannot be invoked without 'new'


Inheritance

ES6 클래스의 또 다른 좋은 특징은 상속을 훨씬 쉽게 사용할 수 있도록 해줍니다.

생성자 함수를 사용하면, 상속을 적절하게 구현하기 위해 몇 가지 수동적인 단계를 수행해야 했습니다.

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

function Dog (name, tricks) {
  // invoke the Pet constructor function passing in our newly created this object 
  // and any required parameters
  Pet.call(this, name);

  // add additional parameters
  this.tricks = tricks;
}

// inherit the parent's prototype functions
Dog.prototype = Object.create(Pet.prototype);

// reset our child class constructor function
Dog.prototype.constructor = Dog;

ES6 클래스는 상속을 훨씬 쉽게 만듭니다. 더 이상 상위 클래스의 프로토타입 함수를 수동적으로 복사하고 클래스의 생성자를 재설정할 필요가 없습니다.

// create parent class
class Pet {
  constructor (name) {
    this.name = name;
  }
}

// create child class and extend our parent class
class Dog extends Pet {
  constructor (name, tricks) {
    // invoke our parent constructor function passing in any required parameters
    super(name);

    this.tricks = tricks;
  }
}


Final thoughts

마지막으로 ES6 클래스는 객체 지향 스타일 JavaScript 를 쉽게 작성할 수 있습니다. ES5 보다 전의 것과 비교했을 때 ES6 클래스는 객체 지향 JavaScript 를 작성하는 깔끔하고 간결한 방법을 제공합니다.

Reference