Javascript 继承最佳策略

Question

目前，我们已经构建了自己的 Javascript 框架，用于为复杂的 Web 应用程序构建小部件、div、面板和表单。我们所有的小部件(又名组件)都继承自一个名为 Viewable 的 super 对象，它主要定义一个 View ，它是一个 HTMLElememnt。

Viewable = {
    getView: function() {
        if (!this.view)
            this.view = this.createView();
        return this.view;
    }
    createView: function() {
        alert(‘You have not implemented createView. You are a very naughty boy!);
    }
}

然后我们使用Object.create(Viewable)创建自己的组件，这些组件都需要实现Viewable中定义的createView。

Header = Object.create(Viewable);
Header.createView = function() {
    var div = document.createElement('div');
    div.id = 'Header';
}

Header.foobar = function() {
}

我想摆脱这种类型的继承，这种动态创建对象，而只是根据我的心情添加方法。

我研究过使用 jQuery 中的 $.extends 的另一种方法。然后我可以创建我的对象(或者更好地说“定义我的函数”？“定义我的类”？)

function Header() {

    $.extend(true, this, Viewable);

    this.createView = function() {
        var div = document.createElement('div');
        div.id = 'Header';
    }

    this.foobar = function() {
    }
}

我想将我的代码重构为第二种方法，因为对我来说好处是:

• 你得到一个构造函数
• 有一定程度的封装
• 它类似于 Java 等 OO 语言(我来自这个世界..)
• 我的 IDE (Webstorm) 更喜欢这个用于智能感知和重构。

但我不确定。有什么缺点吗？我将不得不重构 50 多个文件，所以我对这样做有点紧张。我对 Javascript 还是比较陌生。

同时，我们也在讨论这个问题，这是一个快速的子问题。如果我将 Viewable 重构为如下所示:

function Viewable() {
    this.getView = function() {
        if (!this.view)
            this.view = this.createView();
        return this.view;
    },
    createView:function() {
        alert(‘You have not implemented createView. You are a very naughty boy!);
    }
}

这会更有益吗？我喜欢它，因为对我来说它使代码看起来一致。

Answer 1

JavaScript 没有类定义(还)，没有接口(interface)。 根据心情添加方法原型(prototype)继承的工作原理。

使用 Object.create 或 $.extend 不会改变这一点。

请记住，$.extend 不会为您提供继承树。 Header instanceof Viewable 为 false，您只是复制在 Viewable 上定义的属性。 $.extend 就像修改输入参数的对象合并。

如果 instanceof 对您来说不重要，那么您可以使用任何一种方法。

关于如何在 JavaScript 中获取类定义，ES6 有一些很好的新想法。 ES6 尚未实现，但如果你想要一个可行的预览，你可以看看 Microsoft's TypeScript . TypeScript 并非 100% 兼容 ES6，但它在重要的地方兼容。

TypeScript 添加了类和接口(interface) 以及所有爵士乐。这会为您提供所需的类型提示，但在编译回 JavaScript 时会被删除。