three.js inheritance pattern

Question

I want to know why the three.js code is structured like this:

THREE.Camera = function(){
    THREE.Object3D.call(this);
    //add more Camera specific properties and methods
}

THREE.Camera.prototype = new THREE.Object3D();
THREE.Camera.prototype.constructor = THREE.Camera;

THREE.Camera.prototype.//add more camera specific methods...

I want to know why they call the base constructor in the current constructor and also for the prototype?

In MDN they show a pattern like this:

subType = function(){
    //new properties for subType
}

subType.prototype = new baseType();

They don't have the call to the base constructor in the subType constructor, so why does THREE.js do this?

developer.mozilla.org/en/JavaScript/Guide/…

Esailija
– Esailija

2012-06-19 12:56:04 +00:00
Commented Jun 19, 2012 at 12:56 — Esailija
– Esailija, Commented Jun 19, 2012 at 12:56
possible duplicate of javascript inheritance

Esailija
– Esailija

2012-06-19 12:57:29 +00:00
Commented Jun 19, 2012 at 12:57 — Esailija
– Esailija, Commented Jun 19, 2012 at 12:57

Felix Kling · Accepted Answer · 2012-06-19 13:04:46Z

8

Since each THREE.Object3D instance inherits from THREE.Object3D.prototype, by setting THREE.Camera.prototype this way, each THREE.Camera instance will also inherit from THREE.Object3D.prototype.

If you don't do this, THREE.Camera instances won't inherit any properties assigned to THREE.Object3D.prototype.

So, both parts are important:

By setting THREE.Camera.prototype appropriately, new instances will inherit from THREE.Object3D.prototype and these properties are shared by all instances.
By calling the "parent" constructor function you are initializing each instance with instance-specific data.

That said, setting the prototype like this is not the best approach. What if THREE.Object3D expects arguments without which the constructor would not work?

A better approach is to create an empty object which inherits from THREE.Object3D.prototype, since this is all you need:

THREE.Camera.prototype = Object.create(THREE.Object3D.prototype);
THREE.Camera.prototype.constructor = THREE.Camera;

Reference: Object.create

edited Jun 19, 2012 at 13:04

answered Jun 19, 2012 at 12:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

6 Comments

Van Coding Over a year ago

I agree to use Object.create instead!

Daniel Robinson Over a year ago

If you want the methods from Object3D prototype to be available to Camera objects could you not just assign Camera.prototype directly to Object3D.prototype -> THREE.Camera.prototype = THREE.Object3D.prototype ? why the need to create a new copy of it? so you can add new methods to it without effecting the original copy?

Felix Kling Over a year ago

@DannyR: Exactly. If you'd do THREE.Camera.prototype = THREE.Object3D.prototype then any changes you make to THREE.Camera.prototype would also affect THREE.Object3D.prototype. That's why you want this one level of indirection (as I would call it). Regarding your edit, this is the second point in my list. You don't have to call the parent constructor if you don't want to, but it is reasonable to do so.

mrdoob Over a year ago

FYI: github.com/mrdoob/three.js/commit/… ^^

Felix Kling Over a year ago

@mrdoob: :) I'm kind of proud to have somehow contributed to the three.js library! I'm not using it, since this is not my field, but it looks like a really really good library. Wish you all the best with it!

|

Collectives™ on Stack Overflow

three.js inheritance pattern

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related