javascript executing wrong function

Question

I'm writing some client-side Javascript, where I want to render some tabs and a table. This is the relevant code:

(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();
    })();

})();

What I expect: the console should show rendering tabs, rendering table, and be done with it.

What actually happens: the console shows thousands of rendering tabs until jsFiddle crashes.

This shows that table.render() actually calls tabs.render() recursively. But why? I found this behaviour quite puzzling, can somebody explain where my mistake is?

This question is similar to: Are there problems with calling JavaScript constructors as functions(without new?). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 20, 2024 at 14:00

James Allardice · Accepted Answer · 2015-05-01 12:04:20Z

0

Your mistake is the way you are calling Tabs:

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

And Table:

var table = new Table();

The reason for your issue is that this refers to the global object (window) when the function is not invoked with the new operator. The first thing Tabs does is call Table, and both set this.render. When invoked with new each will have its own context and therefore its own render method.

answered May 1, 2015 at 12:04

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

modemuser Over a year ago

Perfect, thanks! I now also added "use strict"; to the top of my file to be warned of such problems.

Collectives™ on Stack Overflow

javascript executing wrong function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related