javascript - 了解 Coffee Script 中的类扩展和实例属性

Question

我刚接触 Coffee Script，但在弄清楚类扩展的工作原理时遇到了问题。似乎在父类上定义为实例属性的属性在扩展该类时被实现为静态属性。

我有一个名为 Foo 的类，我想将其用作两个子类 Bar 和 Goo 的基类。我给 Foo 一个名为 foobs 的实例属性和一个添加 foob 的方法，如下所示:

class Foo
    foobs:[]
    addFoob: (foob) ->
        @foobs.push(foob)

然后我用 Bar 和 Goo 扩展 Foo，并创建新实例，如下所示:

class Bar extends Foo
    otherMethod: ->
        alert 'doing other stuff'

class Goo extends Foo
    secondMethod: ->
        alert 'doing second stuff'

barInstance = new Bar()
gooInstance = new Goo()

但是当我将 Foob 添加到 barInstance 时，它​​也会添加到 gooInstance!

barInstance.addFoob('test')

console.log gooInstance.foobs (outputs ["test"])

显然我在这里做错了什么。我希望 barInstance 和 gooInstance 每个都有自己的“foobs”属性，但出于某种原因，即使 foobs 是 Foo 上的实例属性，它似乎也被分配为 Bar 和 Goo 上的类属性。关于如何解决这个问题的任何想法？或者可能有我不知道的不同语法？

谢谢

Answer 1

问题在于您如何声明 foobs - 您确实希望它在实例上，因此它应该在 constructor 函数中声明。目前它是在所有实例共享的 prototype 上声明的。如果我们看看你的 Foo 声明编译成什么，我们可以看到是这样的:

class Foo
  foobs:[]
  addFoob: (foob) ->
    @foobs.push(foob)

编译为:

var Foo = (function() {
  function Foo() {}
  Foo.prototype.foobs = [];
  Foo.prototype.addFoob = function(foob) {
    return this.foobs.push(foob);
  };
  return Foo;
})();

你想要做的是像这样声明一个构造函数:

class Foo
  constructor: (@foobs = [])->     
  addFoob: (foob) ->
    @foobs.push(foob)

这将为 Foo 的每个实例添加一个 foobs 数组。