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?
new Tabs()
andnew Table()