Кратко о замыканиях и this:
- Замыкание — функция «запоминает» лексическое окружение, т.е. переменные и значения (или ссылки на объекты), доступные в момент её создания.
- this в JavaScript обычно определяется вызовом функции, но у стрелочных функций this лексическое — оно берётся из внешней (оборачивающей) функции и не меняется при последующем вызове или bind/call/apply.
Разбор кода:
1. При выполнении `obj.f()` функция `f` вызывается как метод объекта, значит внутри `f` значение `this` — `obj`. В `obj` поле `x` равно $1$.
2. `f` возвращает стрелочную функцию `() => this.x`. У стрелочной функции this лексически захвачен из `f`, т.е. это тот же `this`, что и внутри `f` (объект `obj`).
3. `const g = obj.f();` — `g` теперь стрелочная функция, которая при вызове будет брать `this.x` из захваченного `this` (из `obj`).
4. `const h = g.bind({x:2});` — попытка привязать другое `this` не сработает: bind не изменяет лексическое this стрелочной функции. Поэтому `h` ведёт себя так же, как `g`.
5. Вызовы: `g()` вернёт значение `obj.x`, т.е. $1$. `h()` тоже вернёт $1$ (а не $2$), потому что привязка не повлияла.
Итого, `console.log(g(), h());` выведет: $1$ $1$.
Дополнение: если позже изменить `obj.x`, например `obj.x = 10`, то `g()` начнёт возвращать $10$ — стрелочная функция хранит ссылку на объект `obj`, а не копию значения.