{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-06-28-class-inheritance/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"6bf8e702-0cac-5cf3-9d52-53c7a4579491","html":"

Problem

\n

You want to apply inheritance using the class syntax introduced in ES2015.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Define a “class”. Optionally define some properties, getter and setters.

    \n
    'use strict';\nclass Animal {\n  constructor(color) {\n   this._color = color;\n  }\n  get color() {\n    return this._color;\n  }\n  set color(color) {\n    this._color = color;\n  }\n}
    \n
    2. \n
\n\n
    \n
  1. \n

    Define some methods in that “class”.

    \n
    'use strict';\nclass Animal {\n  constructor(color) {\n   this._color = color;\n  }\n  ...\n  makeSound() {\n    console.log('Generic animal cannot make any sound.');\n  }\n}
    \n
    2. \n
  2. \n

    Define another “class” as “subclass” using the extends keyword. Optionally defined some properties, getters and setters.

    \n
    ...\nclass Dog extends Animal {\n  constructor(name, color) {\n    this._name = name;\n  }\n  get name() {\n    return this._name;\n  }\n  set name(name) {\n    this._name = name;\n  }\n}
    \n
    3. \n
  3. \n

    Call the super constructor using super(), passing the parameters expected by the super constructor.

    \n
    ...\nclass Dog extends Animal {\n  constructor(name, color) {\n    super(color);\n    this._name = name;\n  }\n  get name() {\n    return this._name;\n  }\n  set name(name) {\n    this._name = name;\n  }\n}
    \n
    4. \n
  4. \n

    Optional: overwrite some methods in the “subclass”.

    \n
    ...\nclass Dog extends Animal {\n  ...\n  makeSound() {\n    console.log('Wuff wuff');\n  }\n}
    \n
    5. \n
  5. \n

    Voilá, there you got a perfect, tasteful ES2015 inheritance.

    \n
    'use strict';\nclass Animal {\n  constructor(color) {\n   this._color = color;\n  }\n  get color() {\n    return this._color;\n  }\n  set color(color) {\n    this._color = color;\n  }\n  makeSound() {\n    console.log('Generic animal cannot make any sound.');\n  }\n}\nclass Dog extends Animal {\n  constructor(name, color) {\n    super(color);\n    this._name = name;\n  }\n  get name() {\n    return this._name;\n  }\n  set name(name) {\n    this._name = name;\n  }\n  makeSound() {\n    console.log('Wuff wuff');\n  }\n}\nlet dog = new Dog('Bello', 'brown');\nconsole.log(dog.name);                 // \"Bello\"\nconsole.log(dog.color);                // \"brown\"\nconsole.log(dog instanceof Dog);       // true\nconsole.log(dog instanceof Animal);    // true\ndog.makeSound();                       // \"Wuff wuff\"\nlet animal = new Animal('yellow');\nconsole.log(animal.color);             // \"yellow\"\nconsole.log(animal instanceof Animal); // true\nconsole.log(animal instanceof Dog);    // false\nanimal.makeSound();                    // \"Generic animal cannot make any sound.\"
    \n
    6. \n
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-06-28-class-inheritance/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-06-28T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Apply ES2015 class inheritance"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-06-28-class-inheritance/"}}}