javascript - 奇怪的 javascript 行为 - 错误，除非以正确的顺序定义 'classes'

Question

我在 javascript 和画架 js 方面遇到了一个非常奇怪的问题。

我正在使用 easel.js 库，并且已经相当深入地使用它来构建项目。

我正在尝试有一个“类”(我知道它们在技术上不是javascript中的类，但我将使用这个术语，因为缺乏更好的词)从画架js继承Shape类，然后让另一个类继承那。所以它会是这样的:

easeljs.Shape --> 菜单按钮 --> BuildingButton

我使用的代码如下所示:

BuildingButton.prototype = Object.create(MenuButton.prototype);
BuildingButton.prototype.constructor = BuildingButton;

function BuildingButton(){
    MenuButton.call(this);
}

MenuButton.prototype = Object.create(createjs.Shape.prototype);
MenuButton.prototype.constructor = MenuButton;

function MenuButton(){
    createjs.Shape.call(this);
}

问题是我使用此代码收到以下错误:

Uncaught TypeError: undefined is not a function 
easeljs-0.7.1.combined.js:8439

(第8439行指向Shape()构造函数中的initialize()函数)。

现在奇怪的事情来了。如果我更改定义的顺序，以便子类是第二个而不是第一个定义的，那么它就可以正常工作!

MenuButton.prototype = Object.create(createjs.Shape.prototype);
MenuButton.prototype.constructor = MenuButton;

function MenuButton(){
    createjs.Shape.call(this);
}

BuildingButton.prototype = Object.create(MenuButton.prototype);
BuildingButton.prototype.constructor = BuildingButton;

function BuildingButton(){
    MenuButton.call(this);
}

这非常令人困惑，因为我似乎无法弄清楚为什么会发生这种情况。我可以确保以正确的顺序定义它们并保留它，但我将所有“类”放在不同的源文件中，然后通过 grunt 将它们串在一起，按字母顺序排列。 另外，我觉得我对 javascript 的了解可能有很大差距(或者可能是 easel.js，我不确定到底是什么导致了这种行为)。

预先感谢您的帮助，我希望这个问题有意义!

Answer 1

MenuButton.prototype = Object.create(createjs.Shape.prototype);
…
BuildingButton.prototype = Object.create(MenuButton.prototype);

这两个语句有明显的依赖关系，需要以正确的顺序执行(对于函数声明来说，如果放在同一作用域/文件中，顺序是无关紧要的，但如果在不同的文件中，则需要以正确的顺序加载顺序很明显)。

I have all my 'classes' in different source files which are then strung together by grunt, which does so alphabetically

这不是一个好主意。您应该使用一些允许声明依赖项的构建工具/脚本。