Методи в об'єктах ES6: використання функцій стрілок

У ES6 обидва вони є законними:

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

і, як скорочення:

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

Чи можна також використовувати нові функції стрілок? Спробуючи щось на зразок

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

або

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

Я отримую повідомлення про помилку, що припускає, що метод не має доступу до this. Це лише проблема синтаксису, чи ви не можете використовувати жирові методи всередині об’єктів ES6?

Функції зі стрілками не призначені для використання у будь-якій ситуації лише як коротша версія старомодних функцій. Вони не призначені для заміни синтаксису функції за допомогою functionключового слова. Найбільш поширеним варіантом використання функцій стрілок є такі короткі "лямбди", які не перевизначають this, часто використовуються при передачі функції як зворотний виклик деякій функції.

Функції зі стрілками не можуть використовуватися для запису об'єктних методів, оскільки, як ви вже виявили, оскільки функції зі стрілками закриваються над thisконтекстом, що охоплює лексику, thisвнутрішня стрілка є тією, яка була поточною, де ви визначили об'єкт. Що означає:

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

У вашому випадку, бажаючи написати метод на об'єкті, вам слід просто використовувати традиційний functionсинтаксис або синтаксис методу, введений в ES6:

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

// or

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

(Є невеликі відмінності між ними, але вони тільки важливо , якщо ви використовуєте superв getOwner, яких у вас немає, або якщо скопіювати getOwnerна інший об'єкт.)

У списку розсилки es6 було деяке обговорення щодо повороту на функціях стрілок, які мають подібний синтаксис, але зі своїм власним this. Однак ця пропозиція була сприйнята погано, оскільки це лише синтаксис цукру, що дозволяє людям економити введення декількох символів і не надає нових функціональних можливостей щодо існуючого синтаксису функцій. Див. Розділ функції розв’язаних стрілок .

У цьому рядку getOwner: => (this.owner)має бути:

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

Вам доведеться оголосити thisфункцію:

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

Або:

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());

Короткий підказка, за якою я користуюся функціями стрілок.

• Використовуйте функції, що не мають стрілок, для методів, які використовуватимуть object.method()синтаксис. (Це функції, які отримають значуще thisзначення від свого абонента.)
• Використовуйте функцію стрілки майже для всього іншого.

Ця внутрішня функція стрілки не відображає контекст об'єкта. Натомість він дає контекст, де викликається метод object.

Перевірте це, це дає деяке уявлення про те, коли використовувати стрілку, а коли ні. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Якщо вам потрібно використовувати функцію стрілки, ви можете змінити thisна chopper,

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

Хоча це не найкраща практика, коли ви змінюєте назву об’єкта, вам потрібно змінити цю функцію стрілки.

Ще одна порада, у строгому режимі, thisяк і раніше посилається на Вікно, а не на невизначений.

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

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