В JavaScript, почему несуществующие значения свойств "окна" отличаются в этих двух ситуациях?

Question

У меня есть кусок JavaScript кода:

var o = {
    name: "aaaa",
    f: function () {
        console.log(this);
        console.log(this.name);
    }
};

var m1 = o.f;
m1();

console.log(window.non_existent_property);

Как я понимаю, имя свойства не должно иметь большого значения. Если я изменю имя свойства name объекта o на что-то вроде a везде, у меня должен быть тот же результат. Однако, это не так. Смотрите изображение ниже. Я использую код на FireFox 75.0. Кто-нибудь может объяснить, что здесь происходит, пожалуйста?

Answer 1

Проблема не связана со свойством o в объекте - имя свойства на самом деле совершенно не имеет значения , потому что вы теряете контекст вызова при назначении функция для автономной переменной:

var m1 = o.f;
m1();

Приведенный выше код означает, что m1 вызывается без вызова контекста, что означает, что this внутри функции m1 будет либо глобальным объектом ( в небрежном режиме) или undefined (в строгом режиме).

Поскольку вы находитесь в небрежном режиме, this.name ссылается на window.name, что является зарезервированным свойством , который всегда существует в window и всегда должен быть строкой. По умолчанию используется пустая строка.

Вот еще один фрагмент, демонстрирующий тот же тип проблемы:

var foo = 'foo';
var o = {
    f: function () {
        console.log(this.foo);
    }
};

var m1 = o.f;
m1();

foo является свойством окна, поскольку глобальная переменная с именем foo была объявлена ​​с var, поэтому this.foo ссылается на window.foo.