Почему "это" не определено в определении функции жирной стрелки?

Question

Сначала я попробовал это -

const profile = {
    name: 'Alex',
    getName: function(){
      return this.name;
    }
};

Который работает отлично. Теперь я попробовал то же самое с толстой стрелой. В этом случае "это" становится неопределенным.

const profile = {
    name: 'Alex',
    getName: () => {
      return this.name;
    }
};

Это дает мне ошибку

Ошибка типа: не удается прочитать свойство 'имя' из неопределенного

Что я узнал, так это то, что синтаксис жирных стрелок намного лучше обрабатывает неявное "это". Пожалуйста, объясните, почему это происходит.

Answer 1

Как и обычные функции, функция Arrow не имеет this или их собственные, только обычные функции и глобальный охват и this их собственного.

Что будет означать, что всякий раз, когда this будет указано в функции стрелки, он начнет искать область, чтобы найти значение thisили в этом случае при поиске выяснилось, что object не имея this Таким образом, он вышел на глобальный охват и ограничил ценность this с глобальным охватом, где он ничего не найдет. Эти два примера решат ваши сомнения.

var obj = {
    a : 'object???',
    foo : () => { console.log(this.a) }
};

var a = 'global!!!';

obj.foo();              // global!!!

Обтекание стрелки внутри функции

var obj = {
    a : 'object???',
    foo : function() {
        return (() => {
            console.log(this.a)
        })();
    }
};

var a = 'global!!!';

obj.foo();

Здесь я попытался объяснить поведение this для стрелки в глубину.

https://github.com/anirudh-modi/JS-essentials/blob/master/ES2015/Functions/Arrow%20functions.md#how-this-is-different-for-arrow-functions