Chrome 和 Firefox 阻止在 coffeescript 中修改派生的 class 原型？

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的原型。当这些行放回去时，我无法以任何方式修改派生的 class SwedishChef In Chrome 的原型。这包括修改基础 class Muppet 的原型。修改不会传播到子 classes。在 Firefox 中，我无法修改 base class 或 child class.

的原型

从这三行来看，其目的似乎是让子 classes 的原型绑定到父 class 的原型，但这仅在 Internet Explorer 11 中很明显。

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

Answer 1

我认为您只是错误地读取了控制台输出，例如属性在那里，但它要么隐藏在省略号 (...) 后面，要么在 __proto__ 属性你需要扩展它。

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

这是您代码的编译版本，包括您在控制台中执行的部分。它在 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);

Chrome 和 Firefox 阻止在 coffeescript 中修改派生的 class 原型？

Chome and Firefox prevents the modification of a derived class's prototype in coffeescript?

javascript

firefox

google-chrome

coffeescript