3bhwnw
Last Updated: September 28, 2016
·
1.578K
· avetisk

CheatSheet: JavaScript Class & Inheritance

// constructor
var ParentClass = function () {
  // constructor
  this.defaultName = 'Avétis';
};

ParentClass.prototype.sayHelloTo = function (name) {
  console.log('Hi ' + (name || this.defaultName) + '!');
};

var ChildClass = function () {
  // optional, only if you want to call parent constructor
  ChildClass.prototype.constructor.apply(this, arguments);
};

// inheritance
ChildClass.prototype = Object.create(ParentClass.prototype);

ChildClass.prototype.sayHelloTo = function (name) {
  name = name || this.defaultName;
  name = name[0].toUpperCase() + name.slice(1);

  // call parent class method
  ChildClass.prototype.constructor.prototype.sayHelloTo.call(this, name);
};

// instanceof

var a = new ParentClass();
var b = new ChildClass();

console.log(b instanceof ChildClass); // => true
console.log(b instanceof ParentClass); // => true
console.log(a instanceof ChildClass); // => false
console.log(a instanceof ParentClass); // => true


console.log(a.sayHelloTo()); // => "Hi Avétis!"
console.log(b.sayHelloTo()); // => "Hi Avétis!"
console.log(a.sayHelloTo('avetisk')); // => "Hi avetisk!"
console.log(b.sayHelloTo('avetisk')); // => "Hi Avetisk!"

Some may want to add the parent class as ChildClass.__super__ = ParentClass for easier access (which I do not recommend).

6 Responses
Add your response

12694

Good come back to basis dude :).
A question, is there an advantage using inheritance with Object.create instead of :

ChildClass.prototype = new ParentClass();

?

over 1 year ago ·
12695

Compare this:

var ParentClass = function () {
  this.x = 3;
};
var ChildClass = function () {};

// new
ChildClass.prototype = new ParentClass();

var instance1 = new ChildClass();
console.log(instance1.x); // => 3

// Object.create()
ChildClass.prototype = Object.create(ParentClass);

var instance2 = new ChildClass();
console.log(instance2.x) // => undefined

Object.create() won't call the constructor, which is obviously better as you can't pass arguments to ParentChild when defining ChildClass prototype:

var ParentChild = function (mandatoryArg) {
  if (! mandatoryArg) {
    throw new Error('Missing argument.');
  }

  doStuff(mandatoryArg);
};

var ChildClass = function () {};

ChildClass.prototype = new ParentChild(); // will break

I strongly recommend you to read this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

over 1 year ago ·
12709

Thanks for the tip !

--=[bookmarked]=--

That's the bad side of Javascript : Every week you have to re-learn the good practice. This language is alive ... ALIVE !

https://www.youtube.com/watch?feature=player_detailpage&v=3zhqCccFsGc#t=60

over 1 year ago ·
12710

Ha Ha Ha ! :-)

Actually, one thing I learnt from JS is that good practice comes from...practice.

And lots of code analysis.

over 1 year ago ·
28119

Hello how is this one.... an attempt to mimic Java's extends key word.

Function.prototype.extends = function (parent) {
var child = this;
child.prototype.inherit = function () {
var parentProto = parent;
var childProto = child;
var parentObj = new parentProto();
childProto.prototype = parentObj;
childProto.prototype.$super = parentObj;

var newObj;
if(child.arguments.length >0) newObj = new childProto(child.arguments[0]);
else newObj = new childProto();

/Restore the inherit function back in type prototype so that subsequent
creation of unique objects are possible
/
if(typeof this == "function") childProto.prototype.inherit = this;
return newObj;
};
} ;

//Class A
var A = function(){
//some field
//some methods
}

//Class B
var B = function(){

//Check if inheritance needed
if(this.inherit){
var newInst = this.inherit.call(this.inherit);
return newInst;
}
//rest of class B specific code
}

//Here goes the inheritance statement like "Class B extends A"
B.extends(A);

over 1 year ago ·
28195

@siyad: well this (my version and your comment) is all obsolete. Now we have nice ES 6 Class :)

over 1 year ago ·