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

Question

Я обнаружил, что это ключевое слово «this» всегда указывает на global на использование функции стрелки внутри вложенного объектного литерала.

Согласно другим вопросам, следующий фрагмент может быть объяснен как функция «стрелка», указанная в лексическом контексте.

var c = 100; 
var a = {c:5 , fn:() => {return this.c;} }; 
console.log(a.c); //100 

Однако, я не могу понять следующий код (вложенный объект буквального):

var c = 100; 

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

console.log(a.b.fn());// still 100, why not 5? 

я имею в виду, если рассматривать с лексическим контекстом аспекта, следует не «это» в точке abfn к?

Почему, независимо от того, сколько уровней объект вложен, все экземпляры «this» указывают на окно или глобальное?

Answer 1

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

В глобальном масштабе this относится к глобальному объекту (window в случае браузеров). Единственная вещь, которая меняет область видимости, - это функция стрелки (да, они меняют область действия!), Но она связывает это лексически (это означает, что она использует 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; 

Answer 2

Это то же самое, что и 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 «s тело return a.c; или return a.b.c; в зависимости от c вы хотите.

Answer 3

Другой способ думать об этом заключается в том, что в литературе нет понятия о новом «этом» объеме.

Функция, с другой стороны, представит новую область.