Javascript Inheritance ; Call And Prototype

To implement inheritance in Javascript, one generally does the following 2 steps; Say I have a base class 'Animal' var Animal = function(name){ this.name = name; } I now want to d

Solution 1:

varAnimal = function(name){
    this.name = name;
}
Animal.prototype.sleep = function() {
    console.log("Sleeping")
}

... 
// Without this line:Dog.prototype = newAnimal();

// the following code will fail, since `d` does not contain `sleep`
d = newDog();
d.sleep();

Animal.call(this,name); simply calls the function Animal, but using the same this as the calling function.

Dog.prototype = new Animal(); sets the prototype of the prototype. However, Dog.prototype = Object.create(Animal.prototype) might be more correct.

Solution 2:

The first thing to understand is that in JavaScript there is no classical inheritance, the mechanism we know from C-languages like Java, C# and so fort. In JavaScript, code reuse can be accomplished by using prototypal-inheritance. The only thing we have is objects, blocks of code who are alive and don't need to be instantiated. For example: when a function is invoked on an object - like a method, the current object is inspected whether the function is known. If not found, the engine calls it prototype (which is an other object) and inspects whether the function name is known and can be invoked. When not found, íts prototype is called and so on. So, setting the prototype of a object one can orchestrate the prototype-chain.

To answer your question: nothing is necessary, its up to you what you want. Code reuse is what you want and inheritance is the way you can achieve this (Stoyan Stefanov - JavaScript Patterns). In JavaScript, more ways are available to reuse code.

Furthermore, this is bound to the current context, not always the current object.

Solution 3:

There are no classes, nor subclasses, in javascript.

call and apply execute a function in the context of a different 'this'. What you have in your sample code is unneeded.

//Create your constructor function:varAnimal = function(){}

Animal.prototype = {
    sleep: function(){
         console.log('zzz');   
    },
    bark: function(name){
         console.log(name +' barks!');   
    }
}

var dog = newAnimal();

dog.sleep();
dog.bark('asdasd');

Solution 4:

Second step helps you to inherit prototype methods. Imagine that we have more complex class:

functionAnimal(name) {
  this.name = name;
}

// shared methodAnimal.prototype.say = function () {
  alert( this.name );
};

functionDog() {
  Animal.apply(this, arguments);
}

Dog.prototype = newAnimal();


var dog = newDog('Cooper');
// method has been inherited
dog.say(); // alerts 'Cooper'

You can try it here

Solution 5:

Here we define the constructor function for Animal

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

Then define the constructor function for Dog and from inside it we invoke the constructor function of Animal. Just like we do super() in class based object oriented design.

varDog = function(name) {
   Animal.call(this,name);
}

Then we build the prototype of Dog by consuming the methods defined in the prototype of Animal. Here it does not clone methods in Animal , but a link is set between Dog and Animal using which it re uses the methods in Animal

Dog.prototype = new Animal();

And continue extending it adding more methods

Dog.prototype.showName = function(){
     // do something
}