没有 'new' 关键字的 JavaScript 继承

Question

我习惯于在我的代码中使用这种模式，我喜欢它:

var UserWidget = (function(){
    var url = "/users",
        tmpl = "#users li", $tmpl;

    function load() {
        $tmpl = $(tmpl);
        $.getJSON(url, function(json){
            $.each(json, function(i, v) {
                appendUser(v);            
            });
        });
    }

    ...
    return {
        load: load
    };
})();

但是，我有很多“小部件”对象。 “ProfileWidget”、“PlayerWidget”等，每个小部件共享某些操作。所以理想情况下，如果我们以面向对象的方式思考，我希望每个小部件对象都从主“小部件”类继承一些方法。

如何在不改变我一直使用的这个可爱模式的情况下做到这一点？

更清楚地说，我希望能够做这样的事情:

var Widget = (function() {
    function init() {
        console.log("wow yeah");
    }
})();

// have UserWidget inherit somehow the Widget stuff
var UserWidget = (function() { ...

UserWidget.init(); // -> "wow yeah"

Answer 1

请记住，这些解决方案不是我通常推荐的，它们只是为了满足这个问题。

如何关闭所有内容以便从您的“子类”(demo)访问它

var Widget = (function () {

    var init = function () {
        console.log("wow yeah");
    };

    var User = (function () {

        var load = function () {
            init();
        };

        return {
            'load': load
        };
    } ());

    return { 'User': User };
} ());

// Usage: This loads a user and calls init on the "base"
Widget.User.load();

您可能喜欢的另一种方式 ( demo ) 是只使用适当的继承，但在闭包内，然后返回该新函数的一个且仅一个实例。通过这种方式，您可以将 User 和其他对象保留为对象

// Closing around widget is completely unneccesarry, but 
//    done here in case you want closures and in case you 
//    dont want another instance of widget
var Widget = (function () {

    // definition that we'll end up assigning to Widget
    function widget() {
           console.log("base ctor");
    }

    // sample method
    widget.prototype.init = function () {
        console.log("wow yeah");
    };

    // put widget in Widget
    return widget;
} ());

var User = (function () {

    function user() { }
    user.prototype = new Widget();

    // TODO: put your User methods into user.prototype

    return new user();
} ());

var Player = (function () {

    function player() { }
    player.prototype = new Widget();

    // TODO: put your Player methods into player.prototype

    return new player();

} ());

User.init();
Player.init();