Arrow functions a operátor this (JavaScript)

Permalink: http://how-to.mldgroup.com/index.php?article=arrow-functions-a-operator-this-javascript

5.1.2017, Matej LednárKategória: JavaScript

JavaScript arrow functions majú viacero obmedzení, medzi ktoré patrí aj absencia zmeny objektu this. Pre niekoho vyhovujúci stav, pre niekoho, kto arrow function vidí prvý krát, neštandardné správanie. Výhodou v tomto prípade je skutočnosť, že nie je potrebné do arrow function posúvať scope. Funkcia totiž pracuje s platným this a nie s objektom window.

Príklad: Demonštrácia prace s this v arrow function.

1
2
3
4
5
6
7
8
9
10
11
12
var app = {
    prop: 1,
    test: function () {
        var fun1 = value => value * this.prop;
        var fun2 = function(value) {
            return value * this.prop;
        }
        console.log(fun1(5)); // 5
        console.log(fun2(5)); // NaN
    }
}
app.test();  
var app = {
    prop: 1,
    test: function () {
        var fun1 = value => value * this.prop;
        var fun2 = function(value) {
            return value * this.prop;
        }
        console.log(fun1(5)); // 5
        console.log(fun2(5)); // NaN
    }
}
app.test();  

V nasledujúcom príklade je demonštrovaná práca s this detailnejšie a zrozumiteľnejšie, vďaka čomu vidíme okrem návratovej hodnoty aj hodnotu objektu this.

Príklad: Demonštrácia prace s this v arrow function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var app = {
    prop: 1,
    test: function () {
        var fun1 = value => {
            console.log(this);
            return value * this.prop;
        };
        var fun2 = function (value) {
            console.log(this);
            return value * this.prop;
        }
        console.log(fun1(5));
        console.log(fun2(5));
    }
}
app.test();                
var app = {
    prop: 1,
    test: function () {
        var fun1 = value => {
            console.log(this);
            return value * this.prop;
        };
        var fun2 = function (value) {
            console.log(this);
            return value * this.prop;
        }
        console.log(fun1(5));
        console.log(fun2(5));
    }
}
app.test();                

Ako vidieť, arrow function používa aktuálny scope a nie window. Táto vlastnosť môže byť užitočná, ak potrebujeme pracovať s aktuálnym objektom vďaka čomu nemusíme používať techniky na posúvanie scope do funkcie.

Záver

Arrow functions ako novinka v rámci ECMAScriptu majú aj ďalšie odlišnosti od klasických funkcií. Ale o nich až nabudúce.

Arrow functions a operátor this (JavaScript)

Záver

Komentáre

Pridať komentár