calling prototype methods from javascript constructor

Question

I have the following simple inheritence pattern and I would like to know if it's ok to call methods the way i do from within the constructor function (basically speaking, using this instead of "super prototype".

Parent class, Pet

function Pet(name) {
  this.name = name;
  this.nickname = name;

  this.adopt();
}

Pet.prototype.adopt = function() {
  this.nickname = 'Cutty ' + this.name;
}

Pet.prototype.release = function() {
  this.nickname = null;
}

Pet.prototype.cuddle = function() {
  console.log(this.name + ' is happy');
}

Subclass, Lion

function Lion(name) {
  Pet.prototype.constructor.apply(this, arguments); // super(name)
  this.cuddle();
  this.release();
}
Lion.inherits(Pet);

Lion.prototype.adopt = function() {
  // DTTAH
}

Lion.prototype.release = function() {
  Pet.prototype.release.call(this);
  console.log('Thanks for releasing ' + this.name);
}

inherits helper (polyfills are bad I know)

Function.prototype.inherits = function(Parent) {
  function ProtoCopy() {}
  ProtoCopy.prototype = Parent.prototype;

  this.prototype = new ProtoCopy();
  this.prototype.constructor = this;
}

My pets are instantiated like so var lion = new Lion('Simba')

In Lion constructor,
Can I keep using this when calling sub/parent class methods ? Or should I use methods from parent prototype directly ? (like pseudo call to super() or in release())

Reasons why I am asking are:

this substitution at runtime
constructor property not always what we are thinking (from what I read here and there)

I am not sure how these things can influence the resulting object.

Thanks for your enlightenment !

Your inherits function has side-effects, I'd recommend using Object.create. — elclanrs
– elclanrs, Commented Jul 20, 2015 at 19:09
You should omit the .prototype.constructor part everywhere. — Bergi
– Bergi, Commented Jul 20, 2015 at 19:11
That Pet.prototype.constructor.release(); super call is wrong. Your probably meant Pet.prototype.release.call(this); — Bergi
– Bergi, Commented Jul 20, 2015 at 19:11
I don't want to provide this as a full answer, but rather a piece of advice to consider having a look at Klass.js github.com/ded/klass - it allows calling this.super() with ease. — ded
– ded, Commented Jul 20, 2015 at 19:51
@elclanrs what kind of side effects ? this was the part i was the most confident on ! — Jordan
– Jordan, Commented Jul 20, 2015 at 21:43

Community · Accepted Answer · 2017-05-23 12:21:43Z

1

What is the difference between using this.fn() and MyClass.prototype.fn.call(this) in a constructor function?

This is not specific to constructor functions, it's the same in all functions (methods) that are called on instances.

Indeed there's not much difference apart from the character count when this.fn === MyClass.prototype.fn, and they would behave exactly the same. However, this assumption is not always true - this might not inherit from MyClass.prototype directly, but rather be a subclass instance, and that subclass might have overwritten the this.fn method.

So which one is correct? Both, in fact. If you know the difference, you can choose the appropriate one for your case. Other languages have different default expectations here, see also for calling static methods.

Notice that you cannot replace the class reference by this.constructor, which would be overwritten as well. In a reasonable setup¹, this.fn() would be always equivalent to this.constructor.prototype.fn.call(this).

This is similar to the reason why super calls must explicitly reference the super class, and not depend on instance properties (such as this.constructor, this.super or anything similar).

_{1: Where this.fn is a usual method inherited from the prototype, not an own instance-specific one, and where every prototype has the .constructor pointing to the respective constructor whose .prototype it is.}

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 20, 2015 at 23:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Over a year ago

About this part: "Notice that you cannot replace the class reference by this.constructor, which would be overwritten as well" Are you talking about an explicit and targeted overwrite of the constructor property or a side effect of some other operation ?

Bergi Over a year ago

Yes, when subclassing the .constructor is explicitly overwritten. You'll have to use Pet, not this.constructor, because the latter might refer to Lion.

deleted user · Accepted Answer · 2015-07-21 01:10:01Z

1

Simplifying the problem, consider the following code in ES6:

class Pet {
  constructor (name) {
    this.name = name;
    this.talk();
  }
  talk () {
    console.log('My name is ' + this.name);
  }
}

class Lion extends Pet {
  constructor (name) {
    super(name);
  }
  talk () {
    super.talk();
    console.log('I am a lion.');
  }
}

would be equivalent to:

function Pet (name) {
  this.name = name;
  this.talk();
}
Pet.prototype.talk = function () {
  console.log('My name is ' + this.name);
};

function Lion (name) {
  Pet.call(this, name);
}

// inheritance:
Lion.prototype = Object.create(Pet.prototype);
Lion.prototype.constructor = Lion;

// override .talk
Lion.prototype.talk = function () {
  Pet.prototype.talk.call(this);
  console.log('I am a lion');
}

Running new Lion('Bobby') logs:

My name is Bobby
I am a lion

Further reading: http://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5

edited Jul 21, 2015 at 1:10

answered Jul 20, 2015 at 19:21

deleted user

8321 gold badge7 silver badges11 bronze badges

2 Comments

Jordan Over a year ago

isn't the inheritance part missing from your example ? I get lion instanceof Pet === false

deleted user Over a year ago

@Jordan ahh, my bad, I forgot that part. There are two lines that will now return lion instanceof Pet to be true. It's in the article as well, just forgot it.

Collectives™ on Stack Overflow

calling prototype methods from javascript constructor

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related