Understanding how JavaScript Prototypes work

Question

Am messing around with prototypes to get a better understanding of how they work. I can't work out why I can't call hideHeader, whereas I can access a variable (this.header.el)

function App() {
    this.init();
    this.el = document.getElementById('box');
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

Observe what happens when you move the call to App() at the bottom, and also note that document.write overwrites the document — adeneo
– adeneo, Commented May 17, 2015 at 19:57

Glenn Ferrie · Accepted Answer · 2015-05-17 19:57:18Z

9

You should reorder your code so that you define hideHeader before you try to invoke it.

Like this:

function App() {
    this.init();
    this.el = document.getElementById('box');
}

function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

JavaScript is an interpreted language, it's not compiled. It is evaluated sequentially as it is loaded into memory.

edited May 17, 2015 at 19:57

answered May 17, 2015 at 19:55

Glenn Ferrie

10.4k3 gold badges46 silver badges77 bronze badges

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

2 Comments

Sean Vieira Over a year ago

This is due to function hoisting - Header is hoisted, but not hideHeader.

Glenn Ferrie Over a year ago

i'm happy to help. I think you should define init as part of the App function and not in the prototype. I think it will make your code a little cleaner.

Donal · Accepted Answer · 2015-05-17 19:57:43Z

3

You just need to change the order of how you are doing things. For example:

function App() {
    this.init();
    this.el = document.getElementById('box');
}


function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

<div id="header"></div>
<div id="box"></div>

answered May 17, 2015 at 19:57

Donal

33.2k10 gold badges69 silver badges75 bronze badges

Collectives™ on Stack Overflow

Understanding how JavaScript Prototypes work

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related