Исследование контекста this при разных способах вызова функций

Условие

В этом примере показано, как значение this меняется в обычных функциях, методах объекта и стрелочных функциях. Продемонстрированы прямые вызовы, а также использование call, apply и bind, включая попытку пере‑привязать уже связанную функцию.

const methodKey = "fn3";

const container = {
    fn1: function () {
        console.log(this);
        const f = () => console.log(this);
        f();
    },
    fn2() {
        console.log(this);
    },
    [methodKey]: () => console.log(this),
};

console.log(this); //

container.fn1(); //
container.fn2(); //
container[methodKey](); //

const external = {
    new: 123,
};
const boundFn = container.fn1.bind(external);
boundFn.bind(this); //

container.fn2.call(external); //
container[methodKey].apply(external); //

Ответ

fn1 печатает container дважды, fn2 — container. Стрелка fn3 печатает внешний this, который не меняется через apply. Сам вызов boundFn.bind(this) ничего не выводит: он лишь создаёт ещё одну функцию.

В браузерном обычном script первоначальный console.log(this) и оба вызова fn3 показывают глобальный объект; в ES-модуле это undefined. Вложенная стрелка f внутри fn1 захватывает this вызова fn1 и повторяет его.

container.fn2.call(external) печатает external. boundFn уже привязана к external; повторный bind не заменил бы эту привязку даже при последующем вызове. Но в условии ни boundFn, ни результат её bind не вызываются, поэтому дополнительных двух логов fn1 там нет.