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

Question

我想实现一个计数器，它将为类（和子类）的每个实例生成一个唯一 ID。

目前我使用这个：

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"

你看到问题了吗？如果我通过首先实例化一个 SubItem 来做到这一点，那么每个都可以正常工作......但是当我首先实例化“母类”时，计数器就坏了。有没有办法解决这个问题？

我正在寻找的行为是：

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

问题在于SubItem 上的counter 属性遮蔽Item 类上的counter 属性。因此，当以下行运行时：

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

当第一个SubItem 被实例化时，被访问的this.constructor.counter 是Item 上的counter，通过原型继承。但随后对this.constructor.counter 的赋值会直接在子项上分配给counter 属性。 （因此，SubItem 的进一步实例化将直接在 SubItem 上引用 counter 而不是父类）。

您可以通过hasOwnProperty 来检查counter 属性是否直接在构造函数上：

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

我想我会简单地在父类和子类上初始化计数器。我有点犹豫，但我认为它更清晰并简化了构造函数中的代码。这也让子类控制起点（不是我认为这超级有用）：

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

将唯一 ID 放在构造函数之外，并允许它被所有将增加它的类限定。

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"