In PHP/Java one can do:
class Sub extends Base { }
And automatically all public/protected methods, properties, fields, etc of the Super class become a part of the Sub class which can be overridden if necessary.
What's the equivalent for that in Javascript?
We use the extends keyword to say that this class inherits from another class. The Professor class adds a new property teaches , so we declare that. Since we want to set teaches when a new Professor is created, we define a constructor, which takes the name and teaches as arguments.
Inheritance enables you to create new classes that reuse, extend, and modify the behavior defined in other classes. The class whose members are inherited is called the base class, and the class that inherits those members is called the derived class.
When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype.
To inherit a class, you use the extends keyword. For example the following Employee class inherits the Person class: class Employee extends Person { //.. } In this example, the Employee is a child class and the Person is the parent class.
In JavaScript you don't have classes but you can get inheritance and behavior reuse in many ways:
Pseudo-classical inheritance (through prototyping):
function Super () { this.member1 = 'superMember1'; } Super.prototype.member2 = 'superMember2'; function Sub() { this.member3 = 'subMember3'; //... } Sub.prototype = new Super();
Should be used with the new
operator:
var subInstance = new Sub();
Function application or "constructor chaining":
function Super () { this.member1 = 'superMember1'; this.member2 = 'superMember2'; } function Sub() { Super.apply(this, arguments); this.member3 = 'subMember3'; }
This approach should also be used with the new
operator:
var subInstance = new Sub();
The difference with the first example is that when we apply
the Super
constructor to the this
object inside Sub
, it adds the properties assigned to this
on Super
, directly on the new instance, e.g. subInstance
contains the properties member1
and member2
directly (subInstance.hasOwnProperty('member1') == true;
).
In the first example, those properties are reached through the prototype chain, they exist on an internal [[Prototype]]
object.
Parasitic inheritance or Power Constructors:
function createSuper() { var obj = { member1: 'superMember1', member2: 'superMember2' }; return obj; } function createSub() { var obj = createSuper(); obj.member3 = 'subMember3'; return obj; }
This approach is based basically on "object augmenting", you don't need to use the new
operator, and as you can see, the this
keyword is not involved.
var subInstance = createSub();
ECMAScript 5th Ed. Object.create
method:
// Check if native implementation available if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} // empty constructor F.prototype = o; // set base object as prototype return new F(); // return empty object with right [[Prototype]] }; } var superInstance = { member1: 'superMember1', member2: 'superMember2' }; var subInstance = Object.create(superInstance); subInstance.member3 = 'subMember3';
The above method is a prototypal inheritance technique proposed by Crockford.
Object instances inherit from other object instances, that's it.
This technique can be better than simple "object augmentation" because the inherited properties aren't copied over all the new object instances, since the base object is set as the [[Prototype]]
of the extended object, in the above example subInstance
contains physically only the member3
property.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With