Понимание прототипов JavaScript

Погрузитесь с прототипами, чтобы лучше понять, как они работают. Я не могу понять, почему я не могу вызвать hideHeader, тогда как я могу получить доступ к переменной (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';
}

Ответ 1

Вы должны изменить порядок своего кода, чтобы определить hideHeader, прежде чем пытаться его вызвать.

Вот так:

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 - это интерпретируемый язык, он не компилируется. Он оценивается последовательно, поскольку он загружается в память.

Ответ 2

Вам просто нужно изменить порядок действий. Например:

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>