Using Object.defineProperty in a constructor has no effect

I recently revamped my three.js project and ran into a peculiar issue where all objects were being rendered with the same geometry and material. Upon further investigation in the debugger, I narrowed down the problem to this constructor:

function Geometry() {
    Object.defineProperty( this, 'id', { value: GeometryIdCount() } );
    this.uuid = exports.Math.generateUUID();
    ...

After the Object.defineProperty call, Chrome was not showing any properties on the this object, and the id was returning as

undefined</code when accessed later. Strangely, in older projects I had created using three.js, the <code>id
was defined on this.

What could possibly lead to Object.defineProperty behaving this way? It seems that the switch from using node.js require calls in Javascript to ES6 import calls in Typescript with a TS compiler may be the cause, but it's unclear why this change would affect this specific constructor.

Answer №1

Merely stating that "id is undefined" doesn't automatically indicate that Object.defineProperty had no effect, although I acknowledge that you examined the properties of this immediately after calling Object.defineProperty, which is puzzling. If GeometryIdCount() returns undefined, then it makes sense why the value is undefined later on. Have you confirmed that the property itself is truly undefined rather than just its value upon the constructor's completion?

It might be akin to using "utilize" instead of "use," or possibly it is required by Typescript, ES6, or three.js, but why not consider writing this instead:

this.id = GeometryIdCount();

This will still assign an unknown value to this.id if the function returns undefined.

Update: Your query prompted me to delve into the specifics of what Object.defineProperty entails, and the findings were both surprising and enlightening. When working with WebGL, I personally did not utilize three.js, so I mistakenly assumed that Geometry was a custom function created by you.

By calling Object.defineProperty as described (using an object with only the "value" property for the 3rd argument), it effectively sets the writable, configurable, and enumerable properties – all of which are inherent to Object properties – to false. Conversely, this.id = GeometryIdCount() would set these 3 properties to true. The creator of three.js seemingly intended to allocate a unique key to each Geometry object while safeguarding against any alterations by users. Other reasons were not explored by myself.

I suggest making a duplicate of your project, removing any sensitive information (if planning to share here), and eliminating extraneous code where possible to pinpoint the root cause of the issue. Try refraining from removing code once the problematic behavior – like the absence or undefined state of the id property – can no longer be replicated. I conducted tests in a simplified program, attempting to recreate the problem by performing actions like

Geometry.prototype.id = undefined
prior to invoking var g = Geometry(...) without utilizing the new keyword, yet could not reproduce the anomaly. Intrusive measures such as altering the behavior of GeometryIdCount or obstructing the creation of the id property were not pursued, as they appear deliberate acts of sabotage that I presume are not suspected in your scenario.

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 functionality of input onChange in React when using state management?

Whenever I try to log the value of the input after each onChange event, there seems to be an odd one event delay. For example, if 'some text' is the default input value and I remove the letter 't' by pressing backspace/delete, it first ...

Generate app registration in Azure Active Directory by automatically setting up credentials using the administrator's username and password

I am encountering a challenge that I currently cannot comprehend. In my growing list of over 100 different tenants, I aim to automatically create an app registration for each tenant with specific API permissions granted. Upon my initial login to an Azure ...

Information regarding gender vanishes upon refreshing the page

When the page is refreshed, the variable called jso disappears. Is there an alternative method for storing information that does not involve using a button? The goal is to have it work seamlessly when the page is reloaded without requiring any user action. ...

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this

For the last few months, I have been immersed in Node.js/Express to create a REST Api. However, I've hit a roadblock with an async function in my controller.js file. The callback function is successfully receiving the client's request, but when i ...

Utilizing PrimeNG menu items to bind commands to a base class function

I'm struggling to connect a parent class function with my Angular 2 PrimeNG menu options. HTML <p-menu #menu popup="popup" [model]="exportItems"></p-menu> <button type="button" class="fa fa-download" title="Export As" (click)="menu.to ...

Are there any @types available for browser extension objects that are interoperable?

I am in the process of developing a browser extension that would work seamlessly on Edge, Chrome, and Firefox by utilizing Typescript. After coming across an article discussing interoperable browser extensions, I stumbled upon a code snippet: window.brow ...

What is causing the navbar to malfunction on mobile devices?

I am facing an issue with my bootstrap navbar. It seems to be getting stuck when the screen resizes or when viewed on a mobile device. I have tried several solutions from various sources, but none seem to work. Here are some of the answers that I have look ...

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

Is the Expand All / Collapse All feature malfunctioning when used with a tree table?

I have been working on implementing the Expand All/Collapse All feature for a nested tree table, but unfortunately, I am not achieving the desired output. I referred to a related question on this topic which can be found here. You can also view the code on ...

Combining query results/objects by id in an array within a React application with Firebase Firestore

After retrieving chat messages from a Firestore snapshot, I have the following query result involving conversations among three individuals: {timestamp: "October 25th 2020, 11:13:59 am", name: "John Doe", email: "<a href="/cdn ...

What is the process for defining a type that retrieves all functions from a TypeScript class?

Imagine having a class called Foo class Foo { bar(){ // do something } baz() { // do something } } How can you define a type ExtractMethods that takes a class and returns an interface or type containing the class methods? For example: t ...

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues: <li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits} ...

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

Node.js equivalent of Java's byteArray

I have a Node.js REST API with images being sent from a Java application as byte arrays. Here is an image Below is the string representation of the image in byte array form: [B@c75af72 I need to decode this byte array to verify if it is indeed an ima ...

When working on styling a different Styled Component, how should one define the type of props required?

I'm currently working on a NextJS project using styled components and typescript. I have customized a div element like this: export const ClippedOverlay = styled( ( props: React.DetailedHTMLProps< React.HTMLAttributes<HTMLDivElement& ...

The issue with ng-change is causing the previously selected drop down option to be cleared

After successfully implementing live searching with ng-change, I encountered an issue with a pre-selected drop-down box. Despite setting the selected="selected" attribute to make option three the default selection, the drop-down box jumps to the top optio ...

What is the best way to showcase a singular item from response.data?

Below is the controller I have set up to display details of a single book from my collection of json records .controller('BookDetailsController', ['$scope','$http','$stateParams',function($scope,$http,$stateParams){ ...

"jQuery's .each() method is only iterating through the last element in

I am encountering an issue with this function not operating correctly... only the last Element shows the box. NOTES: <aside> is set to position: fixed; and I understand that this is not the "correct" use of <article> tags, but it helps me dist ...

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...