В чем различие работы стрелочных и обычных функций?

Question

[DMITRY Chernenkiy]

var a = "haha"
let first={
  a:1,
  b:2,
  c:()=> {return this.a},
  d:function() { return this.a},
};
let second={
  a:10,
  b:20,
  c:first.c(),
  d:first.d(),
};
console.log(second.c)//haha (1)
console.log(second.d)//1 (2)

Имеем два простых объекта в JS и несколько их методов, однако поведение методов очень разница
1) получаем из метода с объекта first значение"this.a" сохраняем его в переменную и и когда вызываем в консоле получаем свойство "а" глобального объекта
2)получаем свойство "a" из объекта second сохраняем его и выводим в консоль
Вопрос первый почему в 1 мы получаем просто "this.a" и сохраняем, а во втором сначала вызываем "this.a" в объекте, а результат уже сохраняем.

Comments

[Kovalsky]

Щас бы в 2020ом задавать вопросы которые разжеваны много лет назад. Ну серьёзно. Тот же learn js ru

Answer 1

[longclaps]

Стрелочные - это типа стрелочника, на них всё валить можно.
Вот и всё различие.

Answer 2

[Алексей Козин]

function() { return this.a},
имеет скрытый параметр this, она равносильна
(this)=> {return this.a},
this вычисляется и передается в момент вызова функции

() => - это лямбда без аргументов. При создании она захватывает и сохраняет в себя все необходимые внешние данные. В данном случае она запоминает, что this – указывает на объект внешнего уровня.

Answer 3

[approximate solution]

Прочитайте, будет понятно.
https://medium.com/@KucherDev/%D0%BA%D0%BE%D0%B3%D...

Answer 4

[insphoto]

обычная функция порождает свой контекст (this), стрелочная нет. Это значит, что если из одной функции где есть определенный this вы вызовите обычную функцию и в ней захотите ссылаться к этому this, то у вас ничего не получится, this будет соответствовать внутреннему контексту этой вызванной функции. Если же вы вызовите стрелочную, то старый this сохранится, так как она не порождает свой контекст.