Metody w obiektach ES6: użycie funkcji strzałkowych

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żna również korzystać 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)
};

Otrzymuję komunikaty o błędach sugerujące, że metoda nie ma dostępu this. Czy to tylko kwestia składni, czy nie możesz używać metod grubych potoków wewnątrz obiektów ES6?

Funkcje strzałkowe nie są przeznaczone do użytku w każdej sytuacji, a jedynie jako krótsza wersja staromodnych funkcji. Nie mają na celu zastąpienia składni funkcji za pomocą functionsłowa kluczowego. Najczęstszym przypadkiem użycia funkcji strzałkowych są krótkie „lambdy”, które nie zmieniają definicji this, często używane podczas przekazywania funkcji jako wywołania zwrotnego do jakiejś funkcji.

Funkcji strzałkowych nie można używać do pisania metod obiektowych, ponieważ, jak już zauważyłeś, ponieważ funkcje strzałkowe zamykają się nad thiskontekstem obejmującym leksykalnie, thiswewnątrz strzałki jest to, które było aktualne w miejscu zdefiniowania obiektu. To znaczy:

// 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 functionskładni 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;
    }
};

(Są między nimi niewielkie różnice, ale są one ważne tylko wtedy, gdy używasz programu superw programie getOwner, którego nie jesteś, lub kopiujesz getOwnerdo innego obiektu).

Na liście mailingowej es6 odbyła się debata na temat zmiany w funkcjach strzałek, które mają podobną składnię, ale mają własną this. Jednak ta propozycja została źle przyjęta, ponieważ jest to zwykły cukier składniowy, pozwalający ludziom zaoszczędzić na wpisywaniu kilku znaków i nie zapewnia nowej funkcjonalności w stosunku do istniejącej składni funkcji. Zobacz temat niezwiązane funkcje strzałek .

W tej linii getOwner: => (this.owner)powinno być:

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

Musiałbyś zadeklarować thisw 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());

Szybka wskazówka, której używam, aby używać funkcji strzałek.

• Użyj funkcji innych niż strzałki dla metod, które będą używane object.method() składni. (Są to funkcje, które otrzymają znaczącą thiswartość od wywołującego).
• Użyj funkcji strzałek do prawie wszystkiego innego.

Inna wskazówka, w trybie ścisłym, thisnadal odnosi się do Window zamiast undefined.

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

  (function () {
    "use strict";
    console.log(this); // undefined
  })();

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

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

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

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

Chociaż nie jest to najlepsza praktyka, po zmianie nazwy obiektu należy zmienić tę funkcję strzałki.