Javascript中的前向声明

Question

背景

我正在构建一个基于 javascript 的应用程序，该应用程序在移动设备和桌面设备上的工作方式不同。但是，除了 DOM 操作之外，大多数代码在两个平台之间都是通用的，因此我将所有文件结构化，例如： * foo.core.js * foo.mobile.js * foo.web.js

并希望利用面向对象的技术来编写更简洁的代码。

问题：

我有两个带有类的 JavaScript 文件

文件 1：

function ClassA()
{}

ClassA.prototype.foo = function(){};

GreatGrandChildA.prototype = new GrandChildA(); // this is where the error is
function GreatGrandChildA ()
{}

文件 2：

ChildA.prototype = new ClassA();
function ChildA () // ChildA inherits ClassA
{}

GrandChildA.prototype = new ChildA()
function GrandChildA () // GrandChildA inherits ClassA
{}

通常，在像 C++ 这样的语言中，我会在文件 1 中转发声明 GrandChildA。我想知道如何在 Javascript 中做到这一点

编辑：

如果我创建一个包含所有四个类的单个文件 - 按照加载它们的相同顺序，该示例将完全按预期工作：

http://jsfiddle.net/k2XKL/

Answer 1

我假设在您的 HTML 页面上，您先导入文件 1，然后再导入文件 2。

在文件 1 中，您应该会看到异常，因为“GrandChildA”未定义。函数声明未完成，因为文件 2 尚未加载。

在 文件 2 中，您可以：

ChildA.prototype = new ClassA();
function ChildA () // ChildA inherits ClassA
{}

因为 Javacript 运行时提升了您的命名函数“ClassA”之前代码执行到ChildA.prototype = new ClassA();

请在http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting阅读有关函数提升的更多信息以及您是否应该在这种情况下进行操作

Answer 2

实现您想要的最明智的方法是制作 2 个单独的源代码版本。您将想要缩小、混淆您的代码并合并所有源文件，因此创建一个构建脚本（python 将是一个简单的构建脚本的好语言）配置为合并特定于移动设备是有意义的文件到一个文件（加上两个版本共享的文件）和非移动特定文件到另一个文件（以及共享文件）。此外，您可以稍后添加自动混淆和 gzip。然后，您可以将适当的源版本提供给适当的客户端。

Answer 3

如 cmets 中所述，所请求的功能是不可能的。 这不仅是一个技术问题，而且表明 应用程序的结构不恰当——应该改进设计。 现在，应该避免一种循环依赖。

为了比较，您提到您将通过前向声明在 C++ 中解决它 的超类。但这也是不可能的。在 C++ 中， 为了声明一个子类，您需要 include 带有 超类的声明。并且存在循环依赖时无法解决问题。

Answer 4

无序js文件加载的简单逻辑：

文件1：

// ClassB: inherite from ClassA
(function ClassB_Builder() {
  if(window.ClassB)return; // ClassB is already defined;
  if(!window.ClassA) { // ClassA is already not defined;
     setTimeout(ClassB_Builder,0); // shedule class building
     return;
  }
  ClassB=function() {
  }
  ClassB.prototype=new ClassA;
  ClassB.prototype.constructor=ClassB; // can be important for inheritance!!!
})();

文件2：

// ClassA: base class
(function ClassA_Builder() {
  ClassA=function() {
  }
})();

// ClassC: inherite from ClassB
(function ClassC_Builder() {
  if(window.ClassC)return; // ClassC is already defined;
  if(!window.ClassB) { // ClassB is already not defined;
     setTimeout(ClassC_Builder,0); // shedule class building
     return;
  }
  ClassC=function() {
  }
  ClassC.prototype=new ClassB;
  ClassC.prototype.constructor=ClassC; // can be important for inheritance!!!
})();