ES6: this in arrow function

Kas tas this (kontekstas)?

function sayHi(){
 console.log(this);
}

console.log(this);




Rezultatas:

"Globalus" this - visas kontekstas. Išskleidus jį galima rasti sayHi funkciją:

Pasiekti galime:

console.log(this.sayHi);

Su this atsiranda problema naudojant setTimeout:

 let salis = {

//add property 

miestai: ['Vilnius', 'Kaunas', 'Klaipėda'],

//add method

printWithDash: function(){

console.log('inside printWithDash', this);

setTimeout(function(){

console.log('inside setTimeout', this);

console.log(this.miestai.join(" - "));

}, 3000)

}

}

console.log(salis.miestai);

console.log(salis.printWithDash());

Rezultatas:

problema tame, kad funkcijoje setTimeout kontekstas yra globalus. ES6 geroji praktika siūlo naudoti arrow funkciją:

let salis = {

 //add property 

 miestai: ['Vilnius', 'Kaunas', 'Klaipėda'],

 //add method

 printWithDash: function(){

  console.log('inside printWithDash', this);

  setTimeout(() => {

   console.log('inside setTimeout', this);

   console.log(this.miestai.join(" - "))

  }, 3000)

 }

}

salis.printWithDash();

Rezultatas:

Arrow funcijos kontekstas (lieka jį iškvietusios funkcijos) toks pat kaip ir printWithDash.