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

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) 

这里是控制台输出I在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的原型。当这些行被放回时，我不能以任何方式修改派生类的原型SwedishChef在Chrome中。这包括修改基类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);