Metody w obiektach ES6: korzystanie z funkcji strzałek

W ES6 oba są legalne: 

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

I, jako skrót: 

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

Czy możliwe jest również korzystanie z nowych funkcji strzałek? Próbując czegoś takiego 

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

Lub 

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

Pojawia się komunikat o błędzie sugerujący, że metoda nie ma dostępu do this. Czy to tylko problem ze składnią, czy nie można używać metod fat-pipe wewnątrz obiektów ES6?

Author: davidtbernal, 2015-06-28
Source

6 answers

Funkcje strzałek nie są przeznaczone do użycia w każdej sytuacji tylko jako krótsza wersja funkcji staroświeckich. Nie są one przeznaczone do zastępowania składni funkcji za pomocą słowa kluczowego function. Najczęstszym przypadkiem użycia funkcji arrow jest krótkie "lambda", które nie definiują this, często używane przy przekazywaniu funkcji jako wywołania zwrotnego do jakiejś funkcji.

Funkcje strzałek nie mogą być używane do zapisu metod obiektowych, ponieważ, jak się okazało, funkcje strzałek zamykają się nad this kontekstu leksykalnego, this wewnątrz strzałki jest ten, który był obecny, gdzie zdefiniowano obiekt. Czyli: 

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

W Twoim przypadku, chcąc napisać metodę na obiekcie, powinieneś po prostu użyć tradycyjnej składni function, lub składni metody wprowadzonej w ES6: 

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(istnieją niewielkie różnice między nimi, ale są one ważne tylko wtedy, gdy używasz super w getOwner, którym nie jesteś, lub jeśli skopiujesz {[8] } do innego obiekt.)

Na liście dyskusyjnej es6 odbyła się dyskusja na temat zmiany funkcji strzałek, które mają podobną składnię, ale z własną this. Propozycja ta została jednak źle przyjęta, ponieważ jest to zwykły cukier składniowy, pozwalający zaoszczędzić na wpisywaniu kilku znaków i nie zapewnia żadnej nowej funkcjonalności w stosunku do istniejącej składni funkcji. Zobacz temat unbound arrow functions .

 158
Author: T.J. Crowder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-20 18:26:42

W tym wierszu getOwner: => (this.owner) powinno być: 

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

Trzeba by zadeklarować this do funkcji: 

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

Lub: 

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());
 13
Author: Walter Chapilliquen - wZVanG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 21:22:04

Szybka wskazówka, którą podążam za używaniem funkcji strzałek.

  • Użyj funkcji innych niż strzałki dla metod, które będą używać składni object.method(). (Są to funkcje, które otrzymają sensowną wartość this od ich wywołującego.)
  • Użyj funkcji strzałki dla prawie wszystkiego innego.
 1
Author: Isuru Maldeniya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-11 07:48:45

Kolejna wskazówka, w trybie ścisłym, this nadal odnosi się do okna zamiast undefined.

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();
 1
Author: Vimniky Luo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-07 02:57:21

Ta wewnętrzna funkcja strzałki nie odzwierciedla kontekstu obiektu. Zamiast tego podaje kontekst, w którym wywołana jest metoda object.

Sprawdź to, to daje pewien wgląd w to, kiedy używać strzałki, A kiedy nie. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

 0
Author: prabushitha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-26 05:25:41

Jeśli musisz użyć funkcji strzałek, możesz zmienić this na chopper, 

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

Chociaż nie jest to najlepsza praktyka, gdy zmienisz nazwę obiektu, musisz zmienić tę funkcję strzałki.

 0
Author: foxiris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-02 16:40:09