this — контекст вызова

this

Задача #1

Что будет в консоли и почему?

const userService = {
    currentFilter: "active",
    users: [
        { name: "Alex", status: "active" },
        { name: "Nick", status: "deleted" },
    ],
    getFilteredUsers: function () {
        return this.users.filter(function (user) {
            return user.status === this.currentFilter;
        });
    },
};
 
console.log(userService.getFilteredUsers());

Ответ

Пустой массив []. Внутри callback-функции метода filter слово this не ссылается на userService, а на undefined (в strict mode) или window (в non-strict). Поэтому this.currentFilter — undefined, и ни один элемент не проходит фильтр.

Исправить: стрелочная функция в filter (наследует this), либо второй аргумент filter(fn, this), либо const self = this.

Задача #2

Что будет в консоли и почему?

this.width = 30;
 
const smallBox = {
    height: 10,
    width: 10,
    displaySize: function () {
        console.log(this.height, this.width);
    },
};
 
const largeBox = {
    height: 20,
    width: 20,
    displaySize: () => console.log(this.height, this.width),
};
 
smallBox.displaySize(); // ???
largeBox.displaySize(); // ???
 
smallBox.displaySize.bind(largeBox)(); // ???
largeBox.displaySize.bind(smallBox)(); // ???

Ответ

10 10        // обычная функция, this = smallBox
undefined 30 // стрелка: this взят из внешнего scope (this.width = 30)
20 20        // bind(largeBox) на обычной функции — this = largeBox
undefined 30 // стрелку bind не меняет — this остаётся внешним

Ключевое: у стрелочных функций нет собственного this, и bind/call/apply его не переопределяют.