There are many posts explaining what JavaScript inheritance is how it works, is it bad or good, how it is comparable with Java inheritance with millions of examples using third party apis or function to make inheritance look more like C#/C++/Java Inheritance.
This post is just to show HOW inheritance looks without anything else except browser so next time when you need to find it you can open this post which explains everything you need.
JavaScript uses so called prototype inheritance you don’t need to know more except it is different then a C#/C++/Java way of doing inheritance
Define a class
In JavaScript you can define class like this:
function A(){
this.aMethod = function (){
alert("A method");
}
this.bMethod = function () {
alert( "B Method");
}
}
Yes, yes there are different ways I find this one the most easy one you can read more about the ways how to create a class in JavaScript here : http://www.phpied.com/3-ways-to-define-a-javascript-class/
Next you have a class how can you use it ?
var a = new A();
a.bMethod(); //will print B method
a.aMethod(); //will print A method
BAM nothing else, easy right?
ok so what if you want to extend this class ?
Prototype Inheritance
First you will create another class:
function B(){
this.cMethod = function () {
alert("C method");
}
}
ok but how can I say that B extends A ? Simple : B.prototype = new A();
Example :
B.prototype = new A();
var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print B method
b.cMethod(); //will print C method
Overriding is fine too.
function B(){
this.bMethod = function() {
alert("overriding");
}
this.cMethod = function () {
alert("C method");
}
}
And use it as before ( keep in mind the .prototype = new A is required only ones)
B.prototype = new A();
var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod();// will print C method
Full example:
function A(){
this.aMethod = function (){
alert("A method");
}
this.bMethod = function () {
alert( "B Method");
}
}
function B(){
this.bMethod = function() {
alert("overriding");
}
this.cMethod = function () {
alert("C method");
}
}
B.prototype = new A();
var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod(); //will print C Method
Inheritance through Functions
If you don’t like prototypes for some reason you can use a inheritance through functions.
Example:
you just need when you define a class B (the subType) to call this.someFunctionName = supertype and then invoke this.someFunctionName(). Example this.extends = A; this.extends();
Full Example:
function A(){
this.aMethod = function (){
alert("A method");
}
this.bMethod = function () {
alert( "B Method");
}
}
function B(){
this.extends = A;
this.extends();
this.bMethod = function() {
alert("overriding");
}
this.cMethod = function () {
alert("C method");
}
}
var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod(); //will print C method
Comments