Develop Reference

js call base class constructor

Is it possible to call a baseclass constructor from a class?
class BaseCls {
}
class Cls extend BaseCls {
constructor(options){
super(options)
}
}
var instance = new Cls();
Now I want an instance of the baseclas. Something like this:
var baseInstance = new Cls.parent()
I know that I could just call new BaseCls(), but doing it the other way allows me to have only one import.

The superclass is the prototype of the subclass* (which is why superclass static methods are accessible on the subclass), so Object.getPrototypeOf will give you the superclass:
class BaseCls {
constructor() {
console.log("BaseCls");
}
}
class Cls extends BaseCls {
constructor(options){
super(options)
console.log("Cls");
}
}
var base = Object.getPrototypeOf(Cls);
var instance = new base();
You don't have to separate the statements, but if you want to combine them, you have to put () around the call to Object.getPrototypeOf (otherwise new tries to consume it):
var instance = new (Object.getPrototypeOf(Cls))();
And of course, if you wanted to do this generically from a reference to an instance of Cls, it would be:
var superInstance = new (Object.getPrototypeOf(instance.constructor))();
...provided instance doesn't have an own constructor property. Or the rather more convoluted:
var superInstance = new (Object.getPrototypeOf(Object.getPrototypeOf(instance).constructor))();
...if it may have its own constructor property.
* Yes, really. When you use B extends A, there are two parallel lines of inheritance set up: A.prototype is made the prototype of B.prototype, and A is made the prototype of B (whereas in ES5 and earlier, the prototype of a function was always Function.prototype).
Given:
class A {
}
class B extends A {
}
the inheritance looks like this:
B −−−−−−−−−−−−−−> A −−−−−−−−−−−−−−> Function.prototype
B.prototype −−−−> A.prototype −−−−> Object.prototype
class A {
}
class B extends A {
}
console.log(Object.getPrototypeOf(B) === A);
console.log(Object.getPrototypeOf(A) === Function.prototype);
console.log(Object.getPrototypeOf(B.prototype) === A.prototype);
console.log(Object.getPrototypeOf(A.prototype) === Object.prototype);

Inheritance implementation in CoffeeScript

I'm learning the different inheritance implementations in javascript, mostly following the Javascript Patterns book by Stoyan Stefanov.
Now I was inspecting how Coffescript implements it. So given a parent and a child classes or constructors:
class Animal
constructor: (#name) ->
move: (meters) ->
alert #name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
sam = new Snake "Sammy the Python"
sam.move()
They are compiled to:
var Animal, Horse, Snake, sam,
_extends = function(child, parent) {
for (var key in parent) {
if (_hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
},
_hasProp = {}.hasOwnProperty;
Animal = (function() {
function Animal(_name) {
this.name = _name;
}
Animal.prototype.move = function(meters) {
return alert(this.name + (" moved " + meters + "m."));
};
return Animal;
})();
Snake = (function(_super) {
_extends(Snake, _super);
function Snake() {
return Snake.__super__.constructor.apply(this, arguments);
}
Snake.prototype.move = function() {
alert("Slithering...");
return Snake.__super__.move.call(this, 5);
};
return Snake;
})(Animal);
sam = new Snake("Sammy the Python");
sam.move();
As I've understood the implementation of the inheritance in coffescript result from the combination of different patterns:
1. The Classical proxy Constructor
In this case we we also reset the constructor pointer and store the Superclass reference. What Stefanov defines 'Holy Grail'.
With this pattern the child only inherits properties of the prototype.
// the proxy function
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
2. The Inheritance by Copying Properties
With this pattern we simply copy the properties of one object into another
_hasProp = {}.hasOwnProperty;
for (var key in parent) {
if (_hasProp.call(parent, key)) child[key] = parent[key];
}
3. Classical Pattern - Rent-a-Constructor (or Borrow a Constructor)
function Snake() {
return Snake.__super__.constructor.apply(this, arguments);
}
QUESTION:
Are my assumptions correct? Is coffescript compiler using 1+2+3?
The inheritance by copying seems to use a shallow copy, meaning that it is not inspecting to check if the property is an object/array and starting a recursion. Even tough the result seems a perfect deep copy (objects/arrays are copies, not references). Why/how?
Isn't the rent-a-constructor creating a repetition of the inheritance? Properties copied and then parent constructor called again?
Can the _extends function also be used between objects instead of Constructors?
Thanks

Isn't the rent-a-constructor creating a repetition of the inheritance? Properties copied and then parent constructor called again?
The properties being copied here...
for (var key in parent) {
if (_hasProp.call(parent, key)) child[key] = parent[key];
}
... are not prototypal properties, they are "class level" properties, methods defined on the function itself. It's copying properties from the function Animal to the function Horse.
The difference is:
class Animal
# Not part of prototype, part of Animal, must be copied
#build: (name) ->
new #(name)
constructor: (name) ->
#name = "An animal named #{name}"
# Part of prototype
sayName: ->
alert(#name)
class Bird extends Animal
constructor: (name) ->
#name = "A bird named #{name}"
# Both Animal and Bird have build because of the copying of properties:
a = Animal.build('sam') # an animal named sam
b = Bird.build('bob') # a bird named bob
Some annotation on the compiled JavaScript:
var Animal, Bird, a, b,
__extends = function(child, parent) {
for (var key in parent) {
# Copies Animal.build to Bird.build
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
# Makes sayName available to Bird via prototypal inheritance
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
},
__hasProp = {}.hasOwnProperty;
Animal = (function() {
Animal.build = function(name) {
return new this(name);
};
function Animal(name) {
# This still (theoretically) needs to be invoked, regardless of whether
# the properties are copied over, though it isn't invoked in this example
this.name = "An animal named " + name;
}
Animal.prototype.sayName = function() {
return alert(this.name);
};
return Animal;
})();
Bird = (function(_super) {
__extends(Bird, _super);
# There is no "Bird.build" defined here, it is copied from Animal
function Bird(name) {
this.name = "A bird named " + name;
}
# There is no "move" defined here, it is provided by our prototyep
return Bird;
})(Animal);
a = Animal.build('sam');
b = Bird.build('bob');
Regardless, the properties being copied and then "the parent constructor being called again" isn't really what would be happening.
The properties are not defined in the parent constructor, the parent constructor is just an executable blob of code that needs to run. It may not define any properties, or it might define a bunch of properties, but those properties are not going to be set by the prototype or by the _hasOwnProperty loop.

How to inherit STATIC methods?

I have a class
function Man(){...}
Man.drinkBeer = function(){...}
I need to inherit SuperMan from Man. And I still want my Superman be able to drink some beer.
How can I do that?

Object.setPrototypeOf(SuperMan, Man);
This will set the internal __proto__ property of your derived function to be the base function.
Therefore, the derived function will inherit all properties from the base function.
Note that this affects the functions themselves, not their prototypes.
Yes, it's confusing.
No existing browser supports setPrototypeOf(); instead, you can use the non-standard (but working) alternative:
SuperMan.__proto__ = Man;

This is what CoffeeScript does for class inheritance:
var __hasProp = {}.hasOwnProperty,
__extends = function (child, parent) {
for (var key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
And they use it like so:
var Man = (function(){
function Man() { ... }
...
return Man;
})();
....
var SuperMan = (function(_super){
__extends(SuperMan, _super);
function SuperMan() { ... }
...
return SuperMan;
})(Man);
....

JavaScript Extending Class

I have a base class:
function Monster() {
this.health = 100;
}
Monster.prototype.growl = function() {
console.log("Grr!");
}
That I want to extend and create another class with:
function Monkey extends Monster() {
this.bananaCount = 5;
}
Monkey.prototype.eatBanana {
this.bananaCount--;
this.health++; //Accessing variable from parent class monster
this.growl(); //Accessing function from parent class monster
}
I've done quite a bit of research and there appears to be many convoluted solutions for doing this in JavaScript. What would be the simplest and most reliable way of accomplishing this in JS?

Updated below for ES6
March 2013 and ES5
This MDN document describes extending classes well:
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript
In particular, here is now they handle it:
// define the Person Class
function Person() {}
Person.prototype.walk = function(){
alert ('I am walking!');
};
Person.prototype.sayHello = function(){
alert ('hello');
};
// define the Student class
function Student() {
// Call the parent constructor
Person.call(this);
}
// inherit Person
Student.prototype = Object.create(Person.prototype);
// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;
// replace the sayHello method
Student.prototype.sayHello = function(){
alert('hi, I am a student');
}
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
alert('goodBye');
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true
Note that Object.create() is unsupported in some older browsers, including IE8:
If you are in the position of needing to support these, the linked MDN document suggests using a polyfill, or the following approximation:
function createObject(proto) {
function ctor() { }
ctor.prototype = proto;
return new ctor();
}
Using this like Student.prototype = createObject(Person.prototype) is preferable to using new Person() in that it avoids calling the parent's constructor function when inheriting the prototype, and only calls the parent constructor when the inheritor's constructor is being called.
May 2017 and ES6
Thankfully, the JavaScript designers have heard our pleas for help and have adopted a more suitable way of approaching this issue.
MDN has another great example on ES6 class inheritance, but I'll show the exact same set of classes as above reproduced in ES6:
class Person {
sayHello() {
alert('hello');
}
walk() {
alert('I am walking!');
}
}
class Student extends Person {
sayGoodBye() {
alert('goodBye');
}
sayHello() {
alert('hi, I am a student');
}
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true
Clean and understandable, just like we all want. Keep in mind, that while ES6 is pretty common, it's not supported everywhere:

ES6 gives you now the opportunity to use class & extends keywords :
Then , your code will be :
You have a base class:
class Monster{
constructor(){
this.health = 100;
}
growl() {
console.log("Grr!");
}
}
That You want to extend and create another class with:
class Monkey extends Monster {
constructor(){
super(); //don't forget "super"
this.bananaCount = 5;
}
eatBanana() {
this.bananaCount--;
this.health++; //Accessing variable from parent class monster
this.growl(); //Accessing function from parent class monster
}
}

Try this:
Function.prototype.extends = function(parent) {
this.prototype = Object.create(parent.prototype);
};
Monkey.extends(Monster);
function Monkey() {
Monster.apply(this, arguments); // call super
}
Edit: I put a quick demo here http://jsbin.com/anekew/1/edit. Note that extends is a reserved word in JS and you may get warnings when linting your code, you can simply name it inherits, that's what I usually do.
With this helper in place and using an object props as only parameter, inheritance in JS becomes a bit simpler:
Function.prototype.inherits = function(parent) {
this.prototype = Object.create(parent.prototype);
};
function Monster(props) {
this.health = props.health || 100;
}
Monster.prototype = {
growl: function() {
return 'Grrrrr';
}
};
Monkey.inherits(Monster);
function Monkey() {
Monster.apply(this, arguments);
}
var monkey = new Monkey({ health: 200 });
console.log(monkey.health); //=> 200
console.log(monkey.growl()); //=> "Grrrr"

If you don't like the prototype approach, because it doesn't really behave in a nice OOP-way, you could try this:
var BaseClass = function()
{
this.some_var = "foobar";
/**
* #return string
*/
this.someMethod = function() {
return this.some_var;
}
};
var MyClass = new Class({ extends: BaseClass }, function()
{
/**
* #param string value
*/
this.__construct = function(value)
{
this.some_var = value;
}
})
Using lightweight library (2k minified): https://github.com/haroldiedema/joii

I can propose one variant, just have read in book, it seems the simplest:
function Parent() {
this.name = 'default name';
};
function Child() {
this.address = '11 street';
};
Child.prototype = new Parent(); // child class inherits from Parent
Child.prototype.constructor = Child; // constructor alignment
var a = new Child();
console.log(a.name); // "default name" trying to reach property of inherited class

This is an extension (excuse the pun) of elclanrs' solution to include detail on instance methods, as well as taking an extensible approach to that aspect of the question; I fully acknowledge that this is put together thanks to David Flanagan's "JavaScript: The Definitive Guide" (partially adjusted for this context). Note that this is clearly more verbose than other solutions, but would probably benefit in the long-term.
First we use David's simple "extend" function, which copies properties to a specified object:
function extend(o,p) {
for (var prop in p) {
o[prop] = p[prop];
}
return o;
}
Then we implement his Subclass definition utility:
function defineSubclass(superclass, // Constructor of our superclass
constructor, // Constructor of our new subclass
methods, // Instance methods
statics) { // Class properties
// Set up the prototype object of the subclass
constructor.prototype = Object.create(superclass.prototype);
constructor.prototype.constructor = constructor;
if (methods) extend(constructor.prototype, methods);
if (statics) extend(constructor, statics);
return constructor;
}
For the last bit of preparation we enhance our Function prototype with David's new jiggery-pokery:
Function.prototype.extend = function(constructor, methods, statics) {
return defineSubclass(this, constructor, methods, statics);
};
After defining our Monster class, we do the following (which is re-usable for any new Classes we want to extend/inherit):
var Monkey = Monster.extend(
// constructor
function Monkey() {
this.bananaCount = 5;
Monster.apply(this, arguments); // Superclass()
},
// methods added to prototype
{
eatBanana: function () {
this.bananaCount--;
this.health++;
this.growl();
}
}
);

For traditional extending you can simply write superclass as constructor function,
and then apply this constructor for your inherited class.
function AbstractClass() {
this.superclass_method = function(message) {
// do something
};
}
function Child() {
AbstractClass.apply(this);
// Now Child will have superclass_method()
}
Example on angularjs:
http://plnkr.co/edit/eFixlsgF3nJ1LeWUJKsd?p=preview
app.service('noisyThing',
['notify',function(notify){
this._constructor = function() {
this.scream = function(message) {
message = message + " by " + this.get_mouth();
notify(message);
console.log(message);
};
this.get_mouth = function(){
return 'abstract mouth';
}
}
}])
.service('cat',
['noisyThing', function(noisyThing){
noisyThing._constructor.apply(this)
this.meow = function() {
this.scream('meooooow');
}
this.get_mouth = function(){
return 'fluffy mouth';
}
}])
.service('bird',
['noisyThing', function(noisyThing){
noisyThing._constructor.apply(this)
this.twit = function() {
this.scream('fuuuuuuck');
}
}])

For Autodidacts:
function BaseClass(toBePrivate){
var morePrivates;
this.isNotPrivate = 'I know';
// add your stuff
}
var o = BaseClass.prototype;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// MiddleClass extends BaseClass
function MiddleClass(toBePrivate){
BaseClass.call(this);
// add your stuff
var morePrivates;
this.isNotPrivate = 'I know';
}
var o = MiddleClass.prototype = Object.create(BaseClass.prototype);
MiddleClass.prototype.constructor = MiddleClass;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// TopClass extends MiddleClass
function TopClass(toBePrivate){
MiddleClass.call(this);
// add your stuff
var morePrivates;
this.isNotPrivate = 'I know';
}
var o = TopClass.prototype = Object.create(MiddleClass.prototype);
TopClass.prototype.constructor = TopClass;
// add your prototype stuff
o.stuff_is_never_private = 'whatever_except_getter_and_setter';
// to be continued...
Create "instance" with getter and setter:
function doNotExtendMe(toBePrivate){
var morePrivates;
return {
// add getters, setters and any stuff you want
}
}

Summary:
There are multiple ways which can solve the problem of extending a constructor function with a prototype in Javascript. Which of these methods is the 'best' solution is opinion based. However, here are two frequently used methods in order to extend a constructor's function prototype.
ES 2015 Classes:
class Monster {
constructor(health) {
this.health = health
}
growl () {
console.log("Grr!");
}
}
class Monkey extends Monster {
constructor (health) {
super(health) // call super to execute the constructor function of Monster
this.bananaCount = 5;
}
}
const monkey = new Monkey(50);
console.log(typeof Monster);
console.log(monkey);
The above approach of using ES 2015 classes is nothing more than syntactic sugar over the prototypal inheritance pattern in javascript. Here the first log where we evaluate typeof Monster we can observe that this is function. This is because classes are just constructor functions under the hood. Nonetheless you may like this way of implementing prototypal inheritance and definitively should learn it. It is used in major frameworks such as ReactJS and Angular2+.
Factory function using Object.create():
function makeMonkey (bananaCount) {
// here we define the prototype
const Monster = {
health: 100,
growl: function() {
console.log("Grr!");}
}
const monkey = Object.create(Monster);
monkey.bananaCount = bananaCount;
return monkey;
}
const chimp = makeMonkey(30);
chimp.growl();
console.log(chimp.bananaCount);
This method uses the Object.create() method which takes an object which will be the prototype of the newly created object it returns. Therefore we first create the prototype object in this function and then call Object.create() which returns an empty object with the __proto__ property set to the Monster object. After this we can initialize all the properties of the object, in this example we assign the bananacount to the newly created object.

the absolutely minimal (and correct, unlike many of the answers above) version is:
function Monkey(param){
this.someProperty = param;
}
Monkey.prototype = Object.create(Monster.prototype);
Monkey.prototype.eatBanana = function(banana){ banana.eat() }
That's all. You can read here the longer explanation

Looking for a JavaScript implementation of node's "util.inherits"

I am implementing a JavaScript library that can also run on node, and I'd like to use node's API as much as possible. My objects emit events, so I found this nice library called eventemitter2, and which reimplements EventEmitter for JavaScript. Now I'd like to find the same for util.inherits. Has anybody heard about such a project ?

Have you tried using the Node.js implementation? (It uses Object.create, so it may or may not work on the browsers you care about). Here's the implementation, from https://github.com/joyent/node/blob/master/lib/util.js:
inherits = function(ctor, superCtor) {
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
};
Another method is used by CoffeeScript, which compiles
class Super
class Sub extends Super
to
var Sub, Super,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Super = (function() {
function Super() {}
return Super;
})();
Sub = (function(_super) {
__extends(Sub, _super);
function Sub() {
return Sub.__super__.constructor.apply(this, arguments);
}
return Sub;
})(Super);

You don't need to use any external library. Just use javascrit as is.
B inherits from A
B.prototype = Object.create (A.prototype);
B.prototype.constructor = B;
And inside the constructor of B:
A.call (this, params...);
If you know that javascript has a property named constructor, then avoid it, no need to hide or not enumerate it, avoid avoid avoid. No need to have a super property, simply use A.call. This is javascript, don't try to use it like any other language because you will miserably fail.