Autor | Zpráva | ||
---|---|---|---|
Serg Profil |
Ahoj, zkouším udělat v javascriptu zapouzdřený kus kódu na styl OOP, ale nedaří se mi zavolat z jedné metody jinou.
Když jsem uvnitř té první metody nechal vypsat typeof druhé metody, tak to vypsalo "undefined" Nenapadá někoho, kde by mohl být problém? Kód: const player = { rec: [], isPlaying: false, playSpeed: 1, onRecordLoad: function(event) { this.rec = JSON.parse(event.target.result); // Tohle se nikdy nevypise: console.log(this.rec); }, loadRecordFile: function(event) { console.log("Loading file..."); var fileReader = new FileReader(); fileReader.onload = this.onRecordLoad; fileReader.readAsText(event.target.files[0]); console.log(typeof this.onRecordLoad); // undefined }, onPlayPressed: function(event) { if (!this.rec.length) return; // not implemented yet... }, onPlaySpeedChange: function(event) { this.playSpeed = praseInt(event.target.value, 10); } }; const playSpeed = document.getElementById('playSpeed'); const playControlBtn = document.getElementById('playBtn'); const irCameraRecord = document.getElementById('irCameraRecord'); playSpeed.addEventListener('change', player.onPlaySpeedChange); playControlBtn.addEventListener('change', player.onPlayPressed); irCameraRecord.addEventListener('change', player.loadRecordFile); Aha, tak zdá se, že člověk musí být s event handlery opatrný, protože rádi přebírají kontext (this) ve kterém bude funkce spuštěná - jako by nestačilo, že všechno potřebné k danému eventu se dá vzít z argumentu. To znamená, že musím vždy bindovat prostřednictvím pomocné funkce? Nedá se to elegnatněji? irCameraRecord.addEventListener('change', function(ev) { player.loadRecordFile(ev); }); // a: loadRecordFile: function(event) { console.log("Loading file..."); let fileReader = new FileReader(); let that = this; fileReader.onload = function(ev) { that.onRecordLoad(ev); } fileReader.readAsText(event.target.files[0]); } |
||
N71 Profil * |
#2 · Zasláno: 8. 8. 2023, 20:27:53
Ano, to je nepříjemnost JavaScriptu. Dnes taky můžeš použit arrow zápis funkce, která už tohle chování nemá.
|
||
Radek9 Profil |
Serg:
Jak psal N71, na výběr máš buď arrow funkce, které ten kontext this zachovávají:
fileReader.onload = ev => this.onRecordLoad(ev) irCameraRecord.addEventListener('change', ev => player.loadRecordFile(ev)); nebo bind: fileReader.onload = this.onRecordLoad.bind(this) irCameraRecord.addEventListener('change', player.loadRecordFile.bind(player)); |
||
Kcko Profil |
#4 · Zasláno: 9. 8. 2023, 14:07:13
|
||
Serg Profil |
#5 · Zasláno: 10. 8. 2023, 19:26:36
N71, Radek9, Kcko:
Díky |
||
Časová prodleva: 2 měsíce
|
0