Is it unorthodox to utilize constructor instances as prototypes in "WebGL - Up and Running"?

In the book "WebGL - Up and Running," a unique custom geometry is created in a rather straightforward manner. However, what caught my attention was the penultimate line of code. Here's how it looked:

Saturn.Rings = function ( innerRadius, outerRadius, nSegments ) {

    THREE.Geometry.call( this );

    var outerRadius = outerRadius || 1,

    ...snip snip snip...


    this.computeCentroids();
    this.computeFaceNormals();

    this.boundinSphere = { radius: outerRadius };
};

Saturn.Rings.prototype = new THREE.Geometry();
Saturn.Rings.prototype.constructor = Saturn.Rings;

My query revolves around why the author chose to use a constructor instance in the prototype chain. Wouldn't it be simpler for Saturn.Rings.prototype to just be a clean slate inheriting from THREE.Geometry.prototype? Shouldn't all inheritance-worthy components reside within THREE.Geometry.prototype? Why bother making the prototype an instance of the Geometry constructor? (I acknowledge that the prototype chain remains intact since the new prototype inherits from THREE.Geometry's prototype).

Moreover, in the second line of the aforementioned code, instances of Saturn.Rings go through the THREE.Geometry constructor, acquiring all they need from the construction process of THREE.Geometry. Hence, there seems to be no necessity to repeat this with their prototype.

Lets now delve into how a similar geometry is handled within three.js itself:

THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides ) {

    THREE.Geometry.call( this );

    ...snip snip snip...


    }

    this.computeCentroids();
    this.mergeVertices();

};

THREE.CubeGeometry.prototype = Object.create( THREE.Geometry.prototype );

Much cleaner, right? The only hiccup is the oversight of setting the prototype's 'constructor' property to refer back to THREE.CubeGeometry, but that's a minor detail.

Answer №1

Utilizing the constructor may be necessary for cross-browser compatibility reasons. The function Object.create() is a relatively recent addition to JavaScript and may not be supported by older browsers like IE8 and IE7. Merely invoking another object's constructor does not automatically result in the new object inheriting the prototype of the parent object (see demonstration). While there are advantages to avoiding the parent object's constructor, the superiority of using Object.create() as "Way neater" is open to debate.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for incorporating '_BATCHID' into a glTF File?

I am curious about the significance of '_BATCHID' in glTF and how it can be included in a glTF file. I intend to utilize Cesium for rendering .b3dm Files in order to achieve monomerization (singularity). Tools used: Cesium three.js b3dm Thank ...

Transfer photos and videos to an external server using Javascript with Meteor framework

I currently have a meteor application hosted on Digital Ocean. I am considering setting up a dedicated server to store all images and videos separately from the site itself. Whenever a user uploads new media, it will be saved to this separate server. Does ...

Is it possible for Javascript to handle a string of 27601 characters in length?

I have created a webmethod that returns an object containing strings. Each string in the object is of length 27601. This pattern continues for all array members - str(0) to str(n). When my webmethod returns this exact object, I encounter an issue on the c ...

Making HTTP requests to the Gmail API

Today, I dedicated most of my time to learning how to utilize the Gmail API with node.js. Following Google's QuickStart guide, I successfully got the API up and running fairly quickly. It seemed like there were two methods for making API requests. One ...

jQuery's making an error here - looks like matchExpr[type].exec is missing in action

Today, I encountered an error while running my code. Despite searching for guidance online, resources that could help me were hard to come by. Specifically, after crafting a few JavaScript functions, any attempt to use jQuery's methods on selectors r ...

When a user manually updates an input, only then will the jQuery change event be triggered

Is it possible to differentiate between user-initiated changes and manual modifications in JavaScript? $('#item').change(function() { alert('changed!'); }); There are times when I need to trigger the change event artificially wit ...

Showing the contents of an array which contains arrays

Retrieves the elements stored in the history array. Each element of the history array is a separate array containing fields with names and values. The goal is to display this history table by iterating over each element of the array and displaying it in ...

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

Determine if a webpage forwards to a new link with the help of phantomjs, flagging any issues exclusively for designated websites

As a beginner in frontend development, I have a question that may seem simple. Please be patient with me. var page = require('webpage').create(), system = require('system'); if (system.args.length === 1) { console.log('Usage: ...

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

JQuery Ajax encounters a 500 error message due to an internal server issue

I'm currently using the jQuery library to send an ajax request to a PHP file. Initially, everything was working perfectly fine with a relative path like this: url:"fetch_term_grades.php", However, when I modified the path to be more specific like th ...

Unable to locate the required conditional template for the 'mdRadioButton' directive due to the absence of the 'mdRadioGroup' controller

I am currently working on developing a custom directive that will help me display questions within a survey. Given the multiple types of questions I have, I decided to create a single directive and dynamically change its template based on the type of quest ...

The JavaScript audio is not working for the first three clicks, but starts playing smoothly from the fourth click onwards. What could be causing this issue?

$(".btn").click(function(event){ playSound(event.target.id); }); function playSound(name){ $("." + name).click(function() { new Audio("sounds/" + name + ".mp3").play(); ...

"Adjusting the position of the Icon in the Material UI ItemList to make it closer

How can I bring this icon closer to the text? I'm not sure how to do it. When I enter developer mode, it shows me this. https://i.stack.imgur.com/WzhB1.png I am uncertain about what the purplish stuff indicates. My objective is to move the icon to t ...

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

Data loss from AngularJS multipartForm directive when redirecting to different routes

Having trouble with an Excel file uploader and data parsing in the routes? It seems like the FormData is getting lost when sent through the $http service route. Any advice or experience on how to handle this issue would be greatly appreciated! Html View: ...

Ways to expose an object in a Node module

One of my modules relies on a parsing functionality, with other modules needing to query the values provided by this parser. I have some key questions regarding its design: How should I approach building it in terms of design aspects? Which method should ...

establishConnection(); ^ TypeError: establishConnection is undefined

While attempting to connect to MongoDB, I encountered an error in my index.js file. require('dotenv').config(); const express = require('express') const app = express(); const cors = require('cors'); const connection = require ...

You cannot call this expression. The type 'String' does not have any call signatures. Error ts(2349)

Here is the User class I am working with: class User { private _email: string; public get email(): string { return this._email; } public set email(value: string) { this._email = value; } ...

"Step-by-step guide on uploading multiple images to a Node server and storing them in

Hey everyone! I'm currently working on a project using React and MongoDB. Users are required to register and login before accessing the app. Once logged in, they can input their name, number, and images through a form. However, I've encountered a ...