Performing Inheritance in Javascript

Question

Now while i know that you can not perform inheritance like you would in C# ,but i have seen mentions about it arround the net that it is kind of possible. If its not possible using plain javascript then would it be possible using Ext JS and if so how.

Answer 1

Javascript inheritance is done through prototypes, you do not define anything with a class keyword but you make a function that's used as a constructor to build new objects ( with the new keyword ).

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

person.prototype.getName = function() {
    return this.name;
}

var john = new person('john');
alert( john.getName() );

You can access this prototypal method with:

person.prototype.getName

All newly created objects are constructed based on the core constructors ( sometimes called classes by people coming from classical inheritance languages, or the core objects ) such as Object, so every object in Javascript has access to Object.prototype, if you were to make a custom method for all objects you would do

Object.prototype.foo = function(){};
alert( typeof ({}).foo ) // 'function'

Key notes:

• the this word is used to refer to the current object, so this.name sets the name property of the object being created when new person is invoked.
• you can define new prototypal methods on the constructor with constructorName.prototype.nameOfMethod = function(){} after you define the constructor, you do not need to define it inside of the constructor and it's more efficient this way.
• Unless you explicitly define properties on the object, so with the john object I made, since there is no getName method directly attached to the john object the interpreter needs to travel up to the prototype of the john object, which is the person.prototype and access the method from there. You can use hasOwnProperty to see if an object directly owns a property or not.

Reference:

• https://developer.mozilla.org/en/Core%5FJavaScript%5F1.5%5FGuide/Inheritance
• http://www.crockford.com/javascript/inheritance.html

Answer 2

JavaScript object oriented paradigm is Prototype based, there are no "classes", just objects.

You can implement inheritance in different ways, the two more popular alternatives are the "pseudo-classical" and the "prototypal" forms, for example:

Pseudo-classical inheritance:

I think this is the most popular way, you create Constructor Functions that you use with the new operator and you add members through the constructor function prototype.

// define the Person constructor function
function Person() {}

Person.prototype.sayHello = function(){
  alert ('hello');
};

// define the Student constructor function
function Student() {}

// inherit from Person
Student.prototype = new Person();

// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;

// replace the sayHello method (a polymorphism example)
Student.prototype.sayHello = function () {
  alert('hi, I am a student');
}

var student1 = new Student();
student1.sayHello();

Prototypal inheritance:

Basically we make a helper function that takes an object as a parameter and returns an empty new object that inherits from the old one, objects inherit from objects.

// helper function
if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}


var person = {
  sayHello : function () {
     alert('Person object');
  },
  walk : function () {
    alert('walk');
  }
};

var student1 = Object.create(person);
student1.sayHello = function () {
  alert('hello I am a student');
};

Other interesting form is the Parasitic Inheritance, in the "derived" constructor you create a "base" object instance, that object is augmented and that new instance is returned:

// Person constructor function
function Person(name) {
  this.name = name;
}

function Student(value) {
  var that = new Person(value);
  that.sayHello = function () {
    alert('hello I am a student');
  };
  return that;
}