javascript - three.js inheritance pattern - Stack Overflow

admin管理员组

文章数量:1406348

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?

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?

• javascript
• design-patterns
• three.js

Share Improve this question Follow edited Dec 15, 2017 at 8:35 Cœur 38.8k2525 gold badges206206 silver badges278278 bronze badges asked Jun 19, 2012 at 12:53 Daniel RobinsonDaniel Robinson 14.9k2020 gold badges6666 silver badges116116 bronze badges 2

• 1 developer.mozilla/en/JavaScript/Guide/… – Esailija Commented Jun 19, 2012 at 12:56
• 1 possible duplicate of javascript inheritance – Esailija Commented Jun 19, 2012 at 12:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptthreejs inheritance patternStack Overflow