Is this the preferred way to do inheritance in JavaScript?

Question

Hey there I'm not new to programming nor javascript but I'm new to the object oriented world of javascript as it differs from languages I know such as java, c# when it comes to object oriented apsects.

Basically I'd like to know is this the way to do inheritance in javascript, how can I improve it, and what pit falls to watch out for thanks

function Animal(name, age, color){
    this.name  = name;
    this.age   = age;
    this.color = color;
}


Animal.prototype.describeMe = function(){
      console.log("Hello I am " + this.name + " and I am " + this.age + " years old and my color is " + this.color);
};

function Dog(name, age, color, breed){
    Animal.call(this, name, age, color);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.whatAmI = function(){
     console.log("I am a dog");
}


var dog = new Dog("Max", 10, "red", "German Shepard");
dog.whatAmI();
dog.describeMe();

Answer 1

What you have there is one of several different, equally valid, approaches to do inheritance in ECMAScript 5.1.

I suspect hat as ECMAScript 2015 becomes more widespread, most uses of inheritance in ECMAScript will be quickly replaced with the new classes. Classes were added in ECMAScript 2015 to support common inheritance patterns. Despite their name, they are not actually classes, they are constructor functions, and they don't add any new language semantics, they are just syntactic sugar for constructor functions, closures, prototypes, property descriptors, etc. all of which already existed in ECMAScript 5.1 or exist in ECMAScript 2015 independent of classes. (In other words: they let ECMAScript stay true to ECMAScript, and don't try to turn it into Java.)

However, that syntactic sugar really is sweet:

class Animal {
  constructor(name, age, color) {
    this.name  = name;
    this.age   = age;
    this.color = color;
  }

  get description() {
    return "Hello I am " + this.name + " and I am " + this.age + " years old and my color is " + this.color
  }

  describeMe() {
    console.log(this.description);
  }
}

class Dog extends Animal {
  constructor(name, age, color, breed) {
    super(name, age, color);
    this.breed = breed;
  }

  whatAmI() {
   console.log("I am a dog");
  }
}

const dog = new Dog("Max", 10, "red", "German Shepard");
dog.whatAmI();
// I am a dog
dog.describeMe();
// Hello I am Max and I am 10 years old and my color is red

This code is going to desugar to something very much like yours, except with some added closures for encapsulation. I also added a getter, which was not present in your version.

Note that much of this syntactic sugar for methods and getters (and setters, which I didn't demonstrate) is actually also available in object literals, not just in class declarations.