Confusion surrounding the Javascript object prototype (utilizing require.js and three.js)

Question

Confusion surrounding the Javascript object prototype (utilizing require.js and three.js)

I'm feeling a bit confused about my understanding of Objects, prototypes, require.js and three.js. Let me illustrate with an example:

In Summary:

The instance "wee" is derived from "Wee," which acts as a wrapper or monkey patch for THREE...

Shouldn't "wee" then inherit properties and methods from THREE?

(Using the transitive property: a = b = c; therefore a = c.)

define (['three'], function () {
    function WEE(){
      THREE;
      return THREE;
    }
    var test = new WEE;
    console.log("test");
    console.log(test);
    function Wee(){
      WEE.call(this);
      this.prototype = new WEE();
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.aspectRatio = window.innerWidth / window.innerHeight;
    }
    var wee = new Wee();
    console.log("wee");
    console.log(wee);
});

This is where I start to get puzzled...

The 'test' log in Chrome displays:

test
Object {REVISION: "66", CullFaceNone: 0, CullFaceBack: 1, CullFaceFront: 2, CullFaceFrontBack: 3...}

which seems correct. My intention was to create a custom version of three.js.

However, when I log 'wee' in Chrome, it shows:

wee
Wee {prototype: Object, width: 1920, height: 1102, aspectRatio: 1.7422867513611615}

Looking into the prototype details, I can see that the prototype is Wee, which relates to THREE- which is also good... but what's confusing me is when I proceed with this piece of code:

var renderer = new wee.WebGLRenderer();

and it gives back "undefined".

I've also attempted:

var renderer = wee.WebGLRenderer;
var renderer = wee.WebGLRenderer();

but all attempts fail with "Uncaught TypeError: undefined is not a function."

Questions:

What could be happening here?
What key element am I overlooking?
Why does THREE actually work initially, given that my define function requires it but doesn't assign it anywhere?
Am I even asking the right question? Is there a better way to phrase it so I can search for answers more effectively next time?

javascript oop three.js requirejs prototype

Answer 1

Answer №1

Within this excerpt:

this.prototype = new WEE();

The code snippet above creates a property named prototype on the object, but it does not actually set the underlying prototype of the object itself (which is not named prototype; it currently remains anonymous in the standard although some implementations refer to it as __proto__). It could have just as easily been labeled as robert.

In JavaScript, the prototype of an object can be established using one of two methods:

When you instantiate an object using new FunctionName, its prototype is derived from what FunctionName.prototype points to at the time of instantiation with the new operator.
If you create the object via Object.create, then the specified prototype is directly assigned within the Object.create method call.

For instance:

function Foo() {
}
Foo.prototype = {
    bar: 42
};
var f = new Foo();
console.log(f.bar); // 42

And also:

var f = Object.create({
    bar: 42
});
console.log(f.bar); // 42

However, it's important to note:

function Foo() {
    this.prototype = {
        bar: 42
    };
}
var f = new Foo();
console.log(f.bar);           // undefined
console.log(f.prototype.bar); // 42

It should be emphasized that adding a prototype property to an instance created by new Foo does not impact setting the prototype of said instance.

This exemplifies one of the common misunderstandings in JavaScript: The prototype property found on functions is not related to the function's own prototype; rather, it dictates the prototype applied when utilizing the new operator with that function. Objects do not possess any named property representing their prototypes (at least for now, across different JavaScript engine implementations).

Looking ahead to ES6 (the forthcoming version of the specification), the __proto__ property accessor is expected to enable direct access and manipulation of an object's prototype. While supported in existing engines like SpiderMonkey (used in Firefox), it has yet to become standardized.

Answer 2

Within this excerpt:

this.prototype = new WEE();

The code snippet above creates a property named prototype on the object, but it does not actually set the underlying prototype of the object itself (which is not named prototype; it currently remains anonymous in the standard although some implementations refer to it as __proto__). It could have just as easily been labeled as robert.

In JavaScript, the prototype of an object can be established using one of two methods:

When you instantiate an object using new FunctionName, its prototype is derived from what FunctionName.prototype points to at the time of instantiation with the new operator.
If you create the object via Object.create, then the specified prototype is directly assigned within the Object.create method call.

For instance:

function Foo() {
}
Foo.prototype = {
    bar: 42
};
var f = new Foo();
console.log(f.bar); // 42

And also:

var f = Object.create({
    bar: 42
});
console.log(f.bar); // 42

However, it's important to note:

function Foo() {
    this.prototype = {
        bar: 42
    };
}
var f = new Foo();
console.log(f.bar);           // undefined
console.log(f.prototype.bar); // 42

It should be emphasized that adding a prototype property to an instance created by new Foo does not impact setting the prototype of said instance.

This exemplifies one of the common misunderstandings in JavaScript: The prototype property found on functions is not related to the function's own prototype; rather, it dictates the prototype applied when utilizing the new operator with that function. Objects do not possess any named property representing their prototypes (at least for now, across different JavaScript engine implementations).

Looking ahead to ES6 (the forthcoming version of the specification), the __proto__ property accessor is expected to enable direct access and manipulation of an object's prototype. While supported in existing engines like SpiderMonkey (used in Firefox), it has yet to become standardized.

Confusion surrounding the Javascript object prototype (utilizing require.js and three.js)

In Summary:

Questions:

Answer №1

Similar questions

An entity becomes trapped in an endless cycle

clicking on an element to get its div id

Is it possible to directly add a child in HTML from nodejs?

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

What is preventing me from getting jQuery UI 1.8.20 dialog to function on JSFiddle?

Instructions for receiving user input and displaying it on the screen, as well as allowing others with access to the URL to view the shared input provided by the original user

Is it possible to display a value conditionally based on a condition from a Json object?

Understanding the variations in behavior of the history.go(-1) method across various browsers

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

Is there a way to incorporate logic into my Angular routes?

Error Message: ElectronJS - Attempted to access the 'join' property of an undefined variable

Executing DDD encapsulation techniques

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with

By default, make the initial element of the list the selected option in an AngularJS select input

The issue of undefined return for multiple columns in MVC when using MCAutocomplete Jquery UI

Tips for preventing child elements from becoming distorted when the parent element is resized

React automatic scrolling

Error messages encountered following the latest update to the subsequent project

Use React to increment a variable by a random value until it reaches a specific threshold

Parcel Bundler works perfectly fine on localhost, however, an error is being displayed on the index.html file in the Dist folder