JavaScript 执行错误的函数

Question

我正在编写一些客户端 Javascript，我想在其中呈现一些选项卡和表格。这是相关代码:

(function() {

    var Table = function() {
        this.render = function() {
            console.log('rendering table');
        };
        return this;
    };

    var Tabs = function() {
        var table = Table();
        this.render = function() {
            console.log('rendering tabs');
            table.render();
        };
        return this;
    };

    (function() {
        var tabs = Tabs();
        tabs.render();
    })();

})();

我的期望:控制台应该显示渲染选项卡、渲染表，并完成它。

实际发生的情况:控制台显示数千个渲染选项卡，直到 jsFiddle 崩溃。

这表明 table.render() 实际上是递归调用 tabs.render() 的。但为什么？我发现这种行为很令人费解，有人可以解释我的错误在哪里吗？

Answer 1

你的错误是你调用Tabs的方式:

var tabs = new Tabs();
tabs.render();

和表:

var table = new Table();

出现问题的原因是，当未使用 new 运算符调用函数时，this 引用全局对象 (window) 。 Tabs 所做的第一件事是调用 Table，并设置 this.render。当用 new 调用时，每个都将有自己的上下文，因此有自己的 render 方法。