| 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