javascript - typescript ，静态方法继承

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 的关键是子类的构造函数继承 父类(super class)的构造函数。字面上地。 class 不只是在构造函数创建的实例之间设置继承，构造函数自身也在继承结构中。

Foo 是Son 和Daughter 的原型(prototype)。这意味着 Daughter.bar 是 Foo.bar，它是一个继承的属性。但是你给了 Son 它的 own bar 属性，它有自己的数组，所以在 上查找 bar Son 找到 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，尽管您可以做 Nitzan Tomer suggests使用 Map。

---

关于事物组织方式的更多细节。有点像这样:

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−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+−+−>|   (function)  |  |                               / /   +−−−−−−−−−−−−−−−+  |                               | |   | [[Prototype]] |−−+   +−−−−−−−−−−−+                               | |   | bar           |−−−−−>|  (array)  |                               | |   | addBar, etc.  |      +−−−−−−−−−−−+                               | |   +−−−−−−−−−−−−−−−+      | length: 2 |                               | |                          | 0: Hello  |                               | |                          | 1: Both ? |                               | |                          +−−−−−−−−−−−+           +−−−−−−−−−−−−−−−+   | |Daughter−−>|   (function)  |   | |           +−−−−−−−−−−−−−−−+   | |           | [[Prototype]] |−−−+ |           +−−−−−−−−−−−−−−−+     |                                 |           +−−−−−−−−−−−−−−−+     |Son−−−−−−−>|   (function)  |     |           +−−−−−−−−−−−−−−−+     |           | [[Prototype]] |−−−−−+  +−−−−−−−−−−−+           | bar           |−−−−−−−>|  (array)  |           +−−−−−−−−−−−−−−−+        +−−−−−−−−−−−+                                    | length: 1 |                                    | 0: World  |                                    +−−−−−−−−−−−+