如何在es6中实现实例计数器？

Question

我正在学习es6，因此尝试将这些代码从es5转换为es6。

我知道如何在es5中创建实例计数器。 建立在A.prototype上的id和建立在A本身上A counter 。 当我用A构建实例时，它将触发counter++设置id 。 因此，它实现了动作的inheritance counter 。

var A = (function () {
    function A() {
        this.id = ++A.counter;
        console.log(this.id);
    }
    A.counter = 0;
    return A;
}());
a = new A();  // 1
b = new A();  // 2
c = new A();  // 3

如果我在es6中工作，该如何实现相同的功能？

Answer 1

其他两个答案是完全正确的。 但是，如果您想让ES6变得超级疯狂，您可以为这些属性设置吸气剂。

class A {
    constructor() {
        this._id = A.counter;
        console.log(this.id);
    }

    get id() {
        return this._id;
    }

    static get counter() {
        A._counter = (A._counter || 0) + 1;
        return A._counter;
    }
}

a = new A() // <- 1
b = new A() // <- 2
c = new A() // <- 3

这样，您的计数器和id都是只读的，并且您每次访问它时，计数器都会自动递增...另外，它在类定义中也很整洁，而无需在其外部进行。

并不是说您需要以这种方式进行操作...但是，似乎您正在学习ES6，此示例显示了一些有关如何使用它的巧妙技巧。

Answer 2

您可以按照与ES5中完全相同的方式进行操作：

class A {
    constructor() {
        this.id = ++A.counter;
        console.log(this.id);
    }
}
A.counter = 0;
var a = new A();  // 1
var b = new A();  // 2
var c = new A();  // 3

（如果需要，您也可以添加相同的不必要的IIFE）

Answer 3

es6 class可以完成您想要的。

id不是建立在A.prototype ，而是建立在每个A实例上。 constructor要做一个实例。 因此您可以看到，在this.id = ++A.counter类A的新实例时，它执行this.id = ++A.counter 。

class A {
    constructor(){
        this.id = ++A.counter;
        console.log(this.id)
    }
}
A.counter = 0;

a = new A()
b = new A()
c = new A()

Answer 4

这是一个解决方案，也完全包含在ES6类中，作为BryanGrezeszak的答案，但具有不同的行为，在某些情况下可能有用：

class A {
  constructor() {
    this.constructor.counter = (this.constructor.counter || 0) + 1;
    this._id = this.constructor.counter;
    console.log(this.id);
  }
  get id() {
    return this._id;
  }
}

class B extends A {}
class C extends A {}

a = new B(); // <- 1
b = new C(); // <- 1
c = new B(); // <- 2
d = new A(); // <- 1

此代码的区别在于，继承的类具有自己的独立计数器。

如果不想向构造函数添加属性，则可以替换

this.constructor.counter

与

Object.getPrototypeOf(this).counter

这是表达过时的当前方式

this.__proto__.counter

这样， counter将是该类的静态属性，而不是（静态函数） constructor函数的属性。