Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

Question

Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

My JavaScript constructor looks like this:

var BaseThing = function() {
  this.id = generateGuid();
}

When a new BaseThing is created, the ID is unique each time.

var thingOne = new BaseThing();
var thingTwo = new BaseThing();
console.log(thingOne.id === thingTwo.id); // false

However, things become complicated when I attempt to create objects that inherit from BaseThing:

var FancyThing = function() {
   this.fanciness = "considerable";
}
FancyThing.prototype = new BaseThing();

var thingOne = new FancyThing();
var thingTwo = new FancyThing();
console.log(thingOne.id === thingTwo.id); // true

This behavior is expected due to prototypical inheritance, but it's not what I desire; I want the ID to be unique without needing to re-implement it in each inheriting object.

What would be the most effective approach to achieve this? My own ideas were either (a) reimplementing the id in every child constructor (which seems counterintuitive to inheritance) or (b) incorporating an initialize function into BaseThing (but I don't want to worry about ensuring it's called every time a Thing is created).

javascript inheritance prototype

Answer 1

Answer №1

One issue arises when your child does not inherit the constructor from the parent function. To address this, you can first invoke the parent function to achieve the desired outcome without rewriting everything within the parent function. This can be accomplished using the .apply method.

var counter = 0;
function generateGuid() { return ++counter; }

var BaseThing = function() {
  this.id = generateGuid();
}

var thingOne = new BaseThing();
var thingTwo = new BaseThing();
console.log(thingOne.id === thingTwo.id); // false


var FancyThing = function() {
  BaseThing.apply(this, arguments) // inherit
  this.fanciness = "considerable";
}
FancyThing.prototype = Object.create(BaseThing.prototype, {constructor: {value: FancyThing, writable: true, configurable: true}});

var thingOne = new FancyThing();
var thingTwo = new FancyThing();
console.log(thingOne.id === thingTwo.id); // false

Regrettably, I am unaware of a method to extend from a parent without indicating somehow that the parent is being referred to.

Answer 2

One issue arises when your child does not inherit the constructor from the parent function. To address this, you can first invoke the parent function to achieve the desired outcome without rewriting everything within the parent function. This can be accomplished using the .apply method.

var counter = 0;
function generateGuid() { return ++counter; }

var BaseThing = function() {
  this.id = generateGuid();
}

var thingOne = new BaseThing();
var thingTwo = new BaseThing();
console.log(thingOne.id === thingTwo.id); // false


var FancyThing = function() {
  BaseThing.apply(this, arguments) // inherit
  this.fanciness = "considerable";
}
FancyThing.prototype = Object.create(BaseThing.prototype, {constructor: {value: FancyThing, writable: true, configurable: true}});

var thingOne = new FancyThing();
var thingTwo = new FancyThing();
console.log(thingOne.id === thingTwo.id); // false

Regrettably, I am unaware of a method to extend from a parent without indicating somehow that the parent is being referred to.

Answer 3

Answer №2

If you want to add a touch of elegance, consider relocating the id property to BaseThing.prototype and making it a "computed" property using Object.defineProperty

var BaseThing = function() {
  //will define id on prototype
  //this.id = generateGuid();
}

Object.defineProperty(BaseThing.prototype, 'id', {
  configurable: true,
  enumerable: true,
  get: function() {
    //redefine property on first call
    Object.defineProperty(this, 'id', {
        configurable: false,
        enumerable: true,
        value: generateGuid()
    })

    return this.id
  }
})

Check out the demo here.

Answer 4

If you want to add a touch of elegance, consider relocating the id property to BaseThing.prototype and making it a "computed" property using Object.defineProperty

var BaseThing = function() {
  //will define id on prototype
  //this.id = generateGuid();
}

Object.defineProperty(BaseThing.prototype, 'id', {
  configurable: true,
  enumerable: true,
  get: function() {
    //redefine property on first call
    Object.defineProperty(this, 'id', {
        configurable: false,
        enumerable: true,
        value: generateGuid()
    })

    return this.id
  }
})

Check out the demo here.

Answer 5

Answer №3

Sure, one way to approach this is by using the call method along with apply in JavaScript. Here's an example:

function generateId(){
    return Math.random(); 
}

var BaseObject = function() {
  this.id = generateId();
}

var AdvancedObject = function() {
   BaseObject.call(this);
   this.advancementLevel = "high";
}

var obj = new AdvancedObject();
console.log(obj);

https://example.com/code-example

Answer 6

Sure, one way to approach this is by using the call method along with apply in JavaScript. Here's an example:

function generateId(){
    return Math.random(); 
}

var BaseObject = function() {
  this.id = generateId();
}

var AdvancedObject = function() {
   BaseObject.call(this);
   this.advancementLevel = "high";
}

var obj = new AdvancedObject();
console.log(obj);

https://example.com/code-example

Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Creating a JSON object from an array of data using TypeScript

Having trouble fetching information from a JSON file stored in a local directory while using Angular 7

What is the reason for triggering a rerender when there is a modification to a map() element using document.querySelector() in JS/next.js?

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

What could be causing such a significant variance in performance for a wrapped JavaScript function?

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

Leverage multiple services within a single AngularJS controller

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Error encountered in Express middleware: Attempting to write private member #nextId to an object that was not declared in its class

"Use jQuery to toggle the slide effect for the first element of a

Eliminating 'related' elements with jQuery

Add a click event to elements that match

Navigating from a web address to making an asynchronous request using history.js

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

Include characteristics in JSX.Element following its declaration

Best practices for updating the value of a specific key within an object that contains recursion in JavaScript/TypeScript

Is there a way to access hover effect information in Atom editor similar to how it appears in VScode?

Setting the value of a custom component property dynamically after the component has been rendered

Adding items to the array is only effective when done within the loop