Можно ли как-то заменить стрелочную функцию?

Question

[narem]

function getFIO(name, surname, patronymic){
    this.name = name,
    this.surname = surname,
    this.patronymic = patronymic,
    this.sayHello = () => {
        console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
    }
}

var getFio = new getFIO('Юрий', 'Горячев', 'Александрович');
getFio.sayHello();

не совсем понимаю как работает этот кусок

this.sayHello = () => {
        console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
    }

Попытался почитать про стрелочные функции, но недопонял. Может кто по простому объяснить?

Comments

[Виктор Янышев]

Читай про this и так чтобы не потерять контекст this

Answer 1

[Михаил]

Babel приведет это к такому виду

function getFIO(name, surname, patronymic){
  this.name = name;
  this.surname = surname;
  this.patronymic = patronymic;

  var that = this;

  this.sayHello = function() {
    console.log(`Меня зовут ${that.surname} ${that.name} ${that.patronymic}`);
  }
}

Answer 2

[Артем Каюн]

Стрелочная функция это просто синтаксический сахар для привязки контекста выполнения функции.
Давайте по порядку. До ES2015 писали вот так:

function getFIO(name, surname, patronymic) {
  this.name = name,
  this.surname = surname,
  this.patronymic = patronymic,
  this.sayHello = function() {
    console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
  }
}

var getFio = new getFIO('Юрий', 'Горячев', 'Александрович');
getFio.sayHello();

И все прекрасно работало до тех пор пока мы не начинали вызывать функцию `sayHello()` с другим контекстом. Например:

var getFio = new getFIO('Юрий', 'Горячев', 'Александрович');

var sayHello = getFio.sayHello;
sayHello() // в this теперь не объект getFio, а undefined

// или

someElement.addEventListener('click', getFio.sayHello, true) // контекст опять потерялся

Чтобы это исправить в конструкторе класса явно сохраняли контекст и передавали в функцию через замыкание:

function getFIO(name, surname, patronymic) {
   var that = this // сохранили контекст в локальной переменной

  this.name = name,
  this.surname = surname,
  this.patronymic = patronymic,
  this.sayHello = function() {
    console.log(`Меня зовут ${that.surname} ${that.name} ${that.patronymic}`); // теперь как бы ни вызвали эту функцию она всегда будет брать контекст из замыкания
  }
}

// или

function getFIO(name, surname, patronymic) {
   var sayHello = function() {
    console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
  }

  this.name = name,
  this.surname = surname,
  this.patronymic = patronymic,
  this.sayHello = sayHello.bind(this) // явно указываем контекст выполнения функции
}

Чтобы избавится от этих проблем ввели стрелочные функции которые сохраняют контекст в котором они были объявлены.

Answer 3

[Дмитрий Дерепко]

var a = () => {} - это объявление функции, на которую ссылается переменная a
var a = () => {} эквивалентно var a = function(){}

В вашем примере

this.sayHello = () => {
    console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
}

вы в this.sayHello присваиваете функцию.
Это эквивалентно

this.sayHello = function() {
    console.log(`Меня зовут ${this.surname} ${this.name} ${this.patronymic}`);
}

только здесь this будет работать неправильно, потому что в стрелочную функцию this попадет как this из функции getFIO, а в обычную функцию попадет как this анонимной функции (на которую ссылается sayHello)

Answer 4

[maksipes]

Если написать sayHello обычной функцией - свойств не будет найдено, ибо у этой функции будет свой this, отличный от функции лежащей выше - у каждой из них есть свой this.

У стрелочных функций своего this нет, следовательно this будет искаться дальше на уровень выше. И вот тут получается, что найдется this "родительской" функции, который как раз и нужен.

Стрелочная функция всегда "видит" this объекта/функции, где была объявлена.

Так я себе представляю это. Не претендую на точность.