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

What is the best way to retrieve IMDB movie data using AJAX?

disabling a submit button

The issue of button onclick textfield validation malfunctioning

Simplified JavaScript Object Structure

The updating of Angular 2 CLI variables does not occur

Retrieve the access ID from the conn.query result

Using a nested loop in Javascript to fetch JSON data

Monitoring page reload with JavaScript

Create text that alternates between blinking and changing content simultaneously

What is the best way to add data to a URL in an ActionResult Method using window.location.href?

Issues arise when attempting to extract data from a data provider using JSON within the context of the Ionic framework

What could be causing this excessive lag?

Angular displaying a blank screen, even though the complete dataset is available

Using JQuery to pass a concatenated variable

Creating a 2D Image Display in three.js

The ScriptManager.RegisterStartupScript function does not execute a second time when used inside an UpdatePanel

Unleashing the power of real-time communication with XMPP using AngularJS

Utilizing the Vue feature of dynamic route naming within a component's function

When trying to locate an item in an array within a VUE application, it may result in

I am having trouble setting breakpoints in Google Chrome