我应该使用什么方法来计算 JavaScript 中子类的实例？

Question

I would like to implement a counter that will generate a unique ID for every instances of classes (and subclasses).

At the moment I use this:

 class Item { constructor(type) { this.constructor.counter = (this.constructor.counter || 0) + 1; this.type = type || "item"; this._id = this.type + "_" + this.constructor.counter; console.log(this.id); } get id() { return this._id; } } class SubItem extends Item { constructor() { super("sub_item"); } } var test1 = new Item(); // <- "item_1" var test2 = new Item(); // <- "item_2" var test3 = new Item(); // <- "item_3" var test4 = new Item(); // <- "item_4" var test5 = new SubItem(); // <- "sub_item_5" var test6 = new SubItem(); // <- "sub_item_6" var test7 = new Item(); // <- "item_5" var test8 = new Item(); // <- "item_6"

Do you see the problem? If I do it by instantiating a SubItem first, every is working correctly... But when I instantiate the "mother class" first, the counter is broken. Is there a way to solve this problem?

The behavior I am looking for is:

var test1 = new Item(); // <- "item_1" 
var test2 = new Item(); // <- "item_2" 
var test3 = new Item(); // <- "item_3" 
var test4 = new Item(); // <- "item_4" 
var test5 = new SubItem(); // <- "sub_item_1" 
var test6 = new SubItem(); // <- "sub_item_2" 
var test7 = new Item(); // <- "item_5" 
var test8 = new Item(); // <- "item_6" 

Answer 1

The problem is that the counter property on the SubItem is shadowing the counter property on the Item class. So, when the following line runs:

this.constructor.counter = (this.constructor.counter || 0) + 1;

When the first SubItem is instantiated, the this.constructor.counter that is being accessed is the counter on Item , via prototypal inheritence. But then the assignment to this.constructor.counter assigns to the counter property directly on the SubItem . (so, further instantiations of SubItem will refer to the counter directly on SubItem rather than the parent class).

You might check to see if the counter property is directly on the constructor instead, via hasOwnProperty :

 class Item { constructor(type) { this.constructor.counter = ((this.constructor.hasOwnProperty('counter') && this.constructor.counter) || 0) + 1; this.type = type || "item"; this._id = this.type + "_" + this.constructor.counter; console.log(this.id); } get id() { return this._id; } } class SubItem extends Item { constructor() { super("sub_item"); } } var test1 = new Item(); // <- "item_1" var test2 = new Item(); // <- "item_2" var test3 = new Item(); // <- "item_3" var test4 = new Item(); // <- "item_4" var test5 = new SubItem(); // <- "sub_item_5" var test6 = new SubItem(); // <- "sub_item_6" var test7 = new Item(); // <- "item_5" var test8 = new Item(); // <- "item_6"

Answer 2

I think I would simply initialize the counter on both the parent and the subclass. I'm kind of on the fence, but I think it's clearer and simplifies the code in the constructor. This also lets the subclass control the starting point (not that I think that's super useful):

 class Item { constructor(type) { this.constructor.counter++; this.type = type || "item"; this._id = this.type + "_" + this.constructor.counter; console.log(this.id); } get id() { return this._id; } } Item.counter = 0 // initialize class SubItem extends Item { constructor() { super("sub_item"); } } SubItem.counter = 0 // initialize var test1 = new Item(); // <- "item_1" var test2 = new Item(); // <- "item_2" var test3 = new Item(); // <- "item_3" var test4 = new Item(); // <- "item_4" var test5 = new SubItem(); // <- "sub_item_5" var test6 = new SubItem(); // <- "sub_item_6" var test7 = new Item(); // <- "item_5" var test8 = new Item(); // <- "item_6"

Answer 3

Put the unique ID outside the constructor and allow it to be scoped by all classes that will increment it.

 let INSTANCE_COUNT = 0; class Item { constructor(type) { this.type = type || "item"; this._id = `${this.type}_${INSTANCE_COUNT++}`; console.log(this.id); } get id() { return this._id; } } class SubItem extends Item { constructor() { super("sub_item"); } } var test1 = new Item(); // <- "item_0" var test2 = new Item(); // <- "item_1" var test3 = new Item(); // <- "item_2" var test4 = new Item(); // <- "item_3" var test5 = new SubItem(); // <- "sub_item_4" var test6 = new SubItem(); // <- "sub_item_5" var test7 = new Item(); // <- "item_6" var test8 = new Item(); // <- "item_7"