打字稿，静态方法继承

Question

我正在使用 typescript，但类之间的静态继承存在问题

谁能解释一下下面的结果：

class Foo {
    protected static bar: string[] = [];

    public static addBar(bar: string) {
        this.bar.push(bar);
    }

    public static logBar() {
        console.log(this.bar);
    }
}

class Son extends Foo {
    protected static bar: string[] = [];
}

class Daughter extends Foo {}

Foo.addBar('Hello');
Son.addBar('World');
Daughter.addBar('Both ?');
Foo.logBar();
Son.logBar();
Daughter.logBar();

当前结果：

[ 'Hello', 'Both ?' ]
[ 'World' ]
[ 'Hello', 'Both ?' ]

但我想要：

[ 'Hello' ]
[ 'World' ]
[ 'Both ?' ]

我有没有重新声明静态bar 属性的解决方案？

谢谢！

Answer 1

了解static和class的关键是子类的构造函数继承超类的构造函数。字面上地。 class 不只是在构造函数创建的实例之间设置继承，构造函数自身也在继承结构中。

Foo 是Son 和Daughter 的原型。这意味着Daughter.bar 是 Foo.bar，它是一个继承的属性。但是你给了Son 其自己的 bar 属性，具有自己的数组，所以在Son 上查找bar 会找到Son 自己的bar，而不是在Foo。这是一个更简单的例子：

class Foo { }
class Son extends Foo { }
class Daughter extends Foo { }

Foo.bar = new Map([["a", "ayy"]]);
console.log(Foo.bar.get("a"));          // "ayy"

// `Son` inherits `bar` from `Foo`:
console.log(Son.bar === Foo.bar);       // true, same Map object
console.log(Son.bar.get("a"));          // "ayy"

// So does `Daughter` -- for now
console.log(Daughter.bar === Foo.bar);  // true, same Map object
console.log(Daughter.bar.get("a"));   // "ayy"

// Retroactively giving `Son` its own static `bar`
Son.bar = new Map();
console.log(Son.bar === Foo.bar);       // false, different Map objects
console.log(Son.bar.get("a"));          // undefined

这就是为什么当您查看Foo.bar 和Daughter.bar 时会看到["Hello", "Both ?"]：它是相同的bar，指向同一个数组。但是你只能在Son.bar 上看到["World"]，因为它是一个不同的bar 指向不同的数组。

为了将它们分开，您可能希望为每个构造函数提供自己的bar，尽管您可以使用Map 执行Nitzan Tomer suggests 的操作。

---

关于事物如何组织的更多细节。有点像这样：

const Foo = {};
Foo.bar = [];
const Son = Object.create(Foo);
Son.bar = []; // Overriding Foo's bar
const Daughter = Object.create(Foo);
Foo.bar.push("Hello");
Son.bar.push("World");
Daughter.bar.push("Both ?");
console.log(Foo.bar);
console.log(Son.bar);
console.log(Daughter.bar);

如果你重新来过，这是一件非常令人惊讶的事情，但是你的三个类在记忆中看起来是这样的：

+−−>Function.prototype +−−−−−−−−−−−−−−−−+ | Foo−−−−−−−−−−−−−−−−−−−+−+−>| (函数) | | / / +−−−−−−−−−−−−−−−−+ | | | | [[原型]] |−−+ +−−−−−−−−−−−−+ | | |条形 |−−−−−−−−−−>| (数组) | | | | addBar 等 | +−−−−−−−−−−−−−+ | | +−−−−−−−−−−−−−−−−+ |长度：2 | | | | 0：你好| | +−−−−−−−−−−−−−−+ | 1：两者都有？ | | | +−−−−−−−−−−−−−+ +−−−−−−−−−−−−−+ | | | +−−−−−−−−−−−−−−−−+ | | | (函数) | | | +−−−−−−−−−−−−−−−−+ | | 女儿-------->| [[原型]] |−−+ | +−−−−−−−−−−−−−−−−+ | | +−−−−−−−−−−−−−−−−+ | | (函数) | | +−−−−−−−−−−−−−−−−+ | 儿子----------->| [[原型]] |−−−−−−+ +−−−−−−−−−−−−+ |条形 |−−−−−−−−−−>| (数组) | +−−−−−−−−−−−−−−−−+ +−−−−−−−−−−−−+ |长度：1 | | 0：世界 | +−−−−−−−−−−−−−+

Answer 2

在@T.J.Crowder 的answer in this thread 中可以找到关于 OPs 代码行为的非常详细的解释。

为了避免重新定义静态成员的需要，您可以采用这种方法：

class Foo {
    private static bar = new Map<string, string[]>();

    public static addBar(bar: string) {
        let list: string[];

        if (this.bar.has(this.name)) {
            list = this.bar.get(this.name);
        } else {
            list = [];
            this.bar.set(this.name, list);
        }

        list.push(bar);
    }

    public static logBar() {
        console.log(this.bar.get(this.name));
    }
}

class Son extends Foo {}

class Daughter extends Foo {}

Foo.addBar('Hello');
Son.addBar('World');
Daughter.addBar('Both ?');

(code in playground)