{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-06-26-pseudoclassical-inheritance/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"5a1095d0-ae84-5bdf-9d31-e811c059afd8","html":"

Problem

\n

You want to use pseudoclassical inheritance, i.e., create a “class” as “subclass” of another “class”.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Define a function intended to be a constructor function (this will be the “superclass”).

    \n
    function Animal(color) {\n  this._color = color;\n}
    \n
    2. \n
\n\n
    \n
  1. \n

    Define some properties and/or methods on the prototype of that function. Those are the members of the “class”.

    \n
    function Animal(color) {\n  this._color = color;\n}\nAnimal.prototype.getColor = function() {\n  return this._color;\n}\nAnimal.prototype.makeSound = function() {\n  console.log('Generic animal cannot make any sound.');\n}
    \n
    2. \n
  2. \n

    Define another function intended to be a constructor function based on the previously defined function (this will be the “subclass”).

    \n
    ...\nfunction Dog(name, color) {\n  this._name = name;\n}
    \n
    3. \n
  3. \n

    Set the prototype property of that function.

    \n
    ...\nfunction Dog(name, color) {\n  this._name = name;\n}\nDog.prototype = new Animal();
    \n
    4. \n
  4. \n

    Call the super constructor function using the call() method, passing this and the parameters expected by the super constructor.

    \n
    ...\nfunction Dog(name, color) {\n  Animal.call(this, color);\n  this._name = name;\n}\nDog.prototype = new Animal();
    \n
    5. \n
  5. \n

    Define some properties and/or methods on the prototype of that function.

    \n
    ...\nfunction Dog(name, color) {\n  Animal.call(this, color);\n  this._name = name;\n}\nDog.prototype = new Animal();\nDog.prototype.getName = function() {\n  return this._name;\n}
    \n
    6. \n
  6. \n

    Optional: overwrite methods by defining them on the prototype of the “subclass”.

    \n
    ...\nfunction Dog(name, color) {\n  Animal.call(this, color);\n  this._name = name;\n}\nDog.prototype = new Animal();\nDog.prototype.getName = function() {\n  return this._name;\n}\nDog.prototype.makeSound = function() {\n  console.log('Wuff wuff');\n}
    \n
    7. \n
  7. \n

    Voilá, there you got a perfect pseudoclassical inheritance.

    \n
    function Animal(color) {
\n  this._color = color;
\n}\n
Animal.prototype.getColor = function() {
\n  return this._color;\n}
\nAnimal.prototype.makeSound = function() {
\n  console.log('Generic animal cannot make any sound');\n
}\nfunction Dog(name, color) {\n  Animal.call(this, color);\n  this._name = name;\n}\nDog.prototype = new Animal();\nDog.prototype.getName = function() {\n  return this._name;\n}\nDog.prototype.makeSound = function() {\n  console.log('Wuff wuff');\n}\n\nvar dog = new Dog('Bello', 'brown');\nconsole.log(dog.getName());            // \"Bello\"\nconsole.log(dog.getColor());           // \"brown\"\nconsole.log(dog instanceof Dog);       // true\nconsole.log(dog instanceof Animal);    // true\ndog.makeSound();                       // \"Wuff wuff\"\nvar animal = new Animal('yellow');\nconsole.log(animal.getColor());        // \"yellow\"\nconsole.log(animal instanceof Animal); // true\nconsole.log(animal instanceof Dog);    // false\nanimal.makeSound();                    // \"Generic animal cannot make any sound.\"
    \n
    8. \n
\n

Alternative recipes

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