Question

我最近一直在努力学习CoffeeScript。当我试图理解CoffeeScript中的继承系统时，我陷入了一个两难的境地。我在Chrome 40，Internet Explorer 11和Firefox 36中尝试过这种方法，只有Internet Exporer 11以我期望的方式执行。

CoffeeScript中的代码：

class Muppet
    constructor: (@age, @hobby) -> # Why is this function empty?
    answerNanny: -> "Everything's cool!"

class SwedishChef extends Muppet
    constructor: (age, hobby, @mood) ->
        super(age, hobby)
    cook: -> 'Mmmm soup!'

在JavaScript中生成此代码：

var Muppet, SwedishChef,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { 
    for (var key in parent) { 
        if (__hasProp.call(parent, key)) child[key] = parent[key]; 
    } 
    function ctor() { 
        this.constructor = child; 
    } 
    ctor.prototype = parent.prototype; 
    child.prototype = new ctor(); 
    child.__super__ = parent.prototype; return child; 
};

Muppet = (function() {
    function Muppet(age, hobby) {
        this.age = age;
        this.hobby = hobby;
    }

    Muppet.prototype.answerNanny = function() {
        return "Everything's cool!";
    };

    return Muppet;
})();

SwedishChef = (function(_super) {
    __extends(SwedishChef, _super);

    function SwedishChef(age, hobby, mood) {
        this.mood = mood;
        SwedishChef.__super__.constructor.call(this, age, hobby);
    }

    SwedishChef.prototype.cook = function() {
        return 'Mmmm soup!';
    };

    return SwedishChef;
})(Muppet)

以下是我在Chrome中获得的控制台输出：

muppet = new Muppet(3,4)
-> Muppet {age: 3, hobby: 4, answerNanny: function}
chef = new SwedishChef(3,4,5)
-> SwedishChef {mood: 5, age: 3, hobby: 4, constructor: function, cook: function…}
Muppet.prototype.food = "potato"
-> "potato"
muppet
-> Muppet {age: 3, hobby: 4, answerNanny: function, food: "potato"}
chef
-> SwedishChef {mood: 5, age: 3, hobby: 4, constructor: function, cook: function…}
SwedishChef.prototype.food = "fish"
-> "fish"
chef
-> SwedishChef {mood: 5, age: 3, hobby: 4, constructor: function, cook: function…}

现在看来，如果我删除__extends函数中的最后三行，特别是：

ctor.prototype = parent.prototype; 
child.prototype = new ctor(); 
child.__super__ = parent.prototype; return child;

在所有浏览器中，我可以独立地自由修改Muppet和SwedishChef的原型。当这些行被放回时，我无法以任何方式修改Chrome中派生类SwedishChef的原型。这包括修改基类Muppet的原型。修改不会传播到子类。在Firefox中，我无法修改基类或子类的原型。

从这三行看来，目的是让子类将其原型绑定到父类的原型，但这只在Internet Explorer 11中显而易见。

简单地说，我想知道我的错误在哪里。我知道浏览器有时会有奇怪的实现怪癖，但我想排除我在这里犯的任何错误。感谢所有花时间和精力阅读和回答我的问题。

Answer 1

我认为你只是错误地读取你的控制台输出，因为属性在那里，但它隐藏在省略号（...）后面或者它在__proto__属性上，你需要扩大它。

但是，我很好奇你为什么要在事后修改原型而不是将它们包含在类定义中。这不是您不需要修改其内部工作的CoffeeScript类的主要观点之一吗？

这是代码的编译版本，包括您在控制台中执行的部分。它在FireFox和Chrome中运行良好：

var Muppet, SwedishChef, chef, muppet,
  extend = function(child, parent) {
    for (var key in parent) {
      if (hasProp.call(parent, key)) child[key] = parent[key];
    }

    function ctor() {
      this.constructor = child;
    }
    ctor.prototype = parent.prototype;
    child.prototype = new ctor();
    child.__super__ = parent.prototype;
    return child;
  },
  hasProp = {}.hasOwnProperty;

Muppet = (function() {
  function Muppet(age1, hobby1) {
    this.age = age1;
    this.hobby = hobby1;
  }

  Muppet.prototype.answerNanny = function() {
    return "Everything's cool!";
  };

  return Muppet;

})();

SwedishChef = (function(superClass) {
  extend(SwedishChef, superClass);

  function SwedishChef(age, hobby, mood) {
    this.mood = mood;
    SwedishChef.__super__.constructor.call(this, age, hobby);
  }

  SwedishChef.prototype.cook = function() {
    return 'Mmmm soup!';
  };

  return SwedishChef;

})(Muppet);

muppet = new Muppet(3, 4);

chef = new SwedishChef(3, 4, 5);

Muppet.prototype.food = "potato";

console.dir(muppet);

SwedishChef.prototype.food = "fish";

console.dir(chef);

Chome和Firefox阻止在coffeescript中修改派生类的原型？

1 个答案: