почему «это» функции стрелки не изменяется внутри литерала вложенного объекта?

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

В глобальной области this относится к глобальному объекту (window в случае браузеров). Единственное, что изменяет область видимости, — это функция стрелки (да, они ДЕЙСТВИТЕЛЬНО меняют область видимости!), но она связывает this лексически (что означает, что она использует this из внешней области видимости), так что это по-прежнему глобальный объект.

Если вы хотите, чтобы this ссылался на объект a, используйте IIFE вместо литерала объекта:

var c = 100;

var a = new function () {
    this.c = 5;
    this.b = {
        c: 10,
        fn: ()=> {return this.c;}
    }
}()

alert(a.b.fn()) // 5;

Или, чтобы привязать bк this:

var c = 100;

var a = {
    c : 5,
    b : new function () {
        this.c = 10;
        this.fn = ()=> {return this.c;}
    }()
}

alert(a.b.fn()) // 10;

В качестве альтернативы, чтобы связать this с b, вы также можете использовать обычную функцию вместо функции стрелки:

var c = 100;

var a = {
    c: 5,
    b: {
        c: 10,
        fn: function () {return this.c;}
    }
}

alert(a.b.fn()) // 10;

Это то же самое, что и this, где находится инициализатор объекта. Итак, в обоих ваших примерах это то же самое, что и this, где находится ваша строка var a = .... this никогда не изменяется в данном контексте выполнения, и инициализаторы объектов не создают новый контекст выполнения; только функции и eval делают это. В ваших примерах единственный раз, когда создается новый контекст выполнения, — это когда вы вызываете fn, а поскольку fn является стрелочной функцией, она закрывается над this в контексте выполнения, где он был создан (который является глобальным контекстом выполнения в ваши примеры).

Причина, по которой вы видите 100 вместо this.c в вашем примере кода, заключается в том, что this в глобальной области (в свободном режиме) относится к глобальному объекту, а var переменные в глобальной области видимости становятся свойствами глобального объекта, и поэтому this.c является глобальной переменной c.

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

(function() { // Or `(() => {`, doesn't matter in this case
    var c = 100;

    var a = {
        c: 5,
        b: {
            c: 10,
            fn: ()=> {return this.c;}
        }
    }
    console.log(a.b.fn());// still 100, why not 5?
})();    

...this.c будет undefined, потому что, хотя this по-прежнему будет ссылаться на глобальный объект, c больше не будет глобальной переменной (и, следовательно, свойством глобального объекта).

Если вы хотите, чтобы this внутри fn ссылалось на b в выражении a.b.fn(), тогда вам не нужна стрелочная функция, вам нужна обычная функция; вы получите 10 (значение a.b.c), а не 5 (значение a.c).

Конечно, поскольку это одноразовый объект и fn закрывается a, вы также можете просто сделать тело fn return a.c; или return a.b.c; в зависимости от того, какой c вы хотите.

Другой способ думать об этом состоит в том, что внутри литерала нет понятия новой "этой" области видимости.

С другой стороны, функция вводит новую область видимости.