Dotaz: Javascript - Nefunkční this uvnitř funkce

[zacatecnickej]

Ahoj, nemůžu zavolat metodu this.test(); uvnitř funkce v metodě show(). Neví někdo proč?

class Foo{
   test(){
      return 'bar';
   }
   show(){
      setTimeout ( function (){
         return this.test();
      },100);
}
}

var foo = new Foo();
var a = foo.show();
console.log(a);

---

---

Odpovědi

[Kit]

Ta anonymní funkce není součástí třídy a proto nemůže vidět její komponenty.

[zacatecnickej]

A jde to opravit aby nebyla anonymní ta funkce ale zůstala funkční a viděla this?

[BoneFlute]

Můžeš ji volat a voláš ji. Jenom ta funkce vůbec nic nedělá. Celý ten kód je minimálně dvojitý arcinesmysl.

Zaprvé, ta inline funkce, kterou plánuješ tím časovačem (za 100 milisekund), nemá vůbec žádný efekt, zavolá test(), ten vrátí 'bar', inline funkce pak vrátí výsledek toho test()u, tedy zase 'bar', ale ten nikoho nezajímá, takže se ztratí a zapomene.

Zadruhé, to, co se tam snažíš vypsat pomocí console.log(), nemá žádnou spojitost s návratovou hodnotou funkce test() (jestli o tohle šlo). V proměnné a je návratová hodnota funkce show(), která je undefined, protože ve funkci show() není žádný return statement. Tady si můžeš přečíst, jak správně vracet hodnoty z asynchronních volání a setTimeout().

Zatřetí, v té inline funkci se nedá přistupovat k implicitnímu parametru this takhle přímo, protože taková inline funkce je (velmi zjednodušeně řečeno) buďto jiný objekt nebo úplně mimo kontext jakéhokoliv objektu, tj. proměnnou this nemá vůbec definovanou. Tohle je taky známá věc, stačí jenom hledat.

class Foo {
  constructor(message) {
    this.message = message;
  }
  show() {
    var _this = this;
    setTimeout (function() {
      console.log(_this.message);
    }, 1000);
  }
}

var foo = new Foo('blahblah');
foo.show();
console.log('Show scheduled!');

[Andrej]

Oprava: Ta metoda test() původně nebyla volaná vůbec (právě kvůli problému č. 3 s použitím this). To mi nějak uniklo.

[zacatecnickej]

Ahoj, díky moc. Mě jde opravdu jenom o tuto funkci 'setTimeout' kterou mám v nějaké metodě a v té funkci se potřebuji dostat přímo na this, jde to i bez použítí var _this = this ; ?

setTimeout ( function (){
   this.test();
},100);

[Andrej]

Tu inline funkci si lze představit jako metodu v oddělenén samostatném objektu, tj. i kdyby tam this byl definovaný, ukazoval by na jinou instanci jiného typu.

Nechápu, co míníš formulací „přímo na this“. Když si uložíš var _this = this, pak _this ukazuje přímo na ten původní objekt, na který ukazoval this. Je to reference. Jde jen o formalitu s uložením té reference v kontextu, který bude později dostupný dynamické inline funkci; nic přímého / nepřímého bych za tím nehledal.

[krab]

Dobry den, pouzijte metodu bind:

 

setTimeout(function () {
   this.test();
}.bind(this), 100);

 

Aby Vas ukazkovy kod spravne fungoval, je nutne pouzit promise:

 

class Foo {
   test() {
      return 'bar';
   }

   show() {
      return new Promise(function(resolve, reject) {
         setTimeout (function () {
            resolve(this.test());
         }.bind(this), 100);
      }.bind(this));
   }
};

var foo = new Foo();
var a = foo.show();
a.then(console.log);

[crap]

Konecne nekdo kdo umi slusne a vecne odpovedet