Zrozumienie prototypów JavaScript

Question

Mam problemy z prototypami, aby lepiej zrozumieć, jak działają. Nie mogę zrozumieć dlaczego nie mogę nazwać hideHeader, natomiast mam dostępu do zmiennej (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'; 
} 

Answer 1

Należy uporządkować swój kod tak, że zdefiniowaćhideHeader zanim spróbujesz przywołaj to.

Jak to:

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 jest językiem interpretowanym, to nie jest skompilowany. Jest oceniany sekwencyjnie, ponieważ jest ładowany do pamięci.

Answer 2

Trzeba tylko zmienić kolejność wykonywania czynności. Na przykład:

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>