Comprensione di JavaScript Prototipi

Question

Mi sto cazzando con i prototipi per capire meglio come funzionano. Non riesco a capire il motivo per cui non posso chiamare hideHeader, mentre posso accedere a una variabile (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

Si dovrebbe riordinare il codice in modo che si definirehideHeader prima di provare a invocalo.

Ti piace questa:

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 è un linguaggio interpretato, non è compilato. Viene valutato in sequenza mentre viene caricato in memoria.

Answer 2

Hai solo bisogno di cambiare l'ordine di come stai facendo le cose. Per esempio:

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>