Как разобраться с this в javascript окончательно?

Вадим, спасибо большое)

Как разобраться с this в javascript окончательно?

спасибо большущее, и за ссылочку отдельное спасибо))

Как разобраться с this в javascript окончательно?

спасибо большущее, и за ссылочки отдельное спасибо))

Как разобраться с this в javascript окончательно?

Alexandroppolus, спасибо большущее пребольшущее))

Как разобраться с this в javascript окончательно?

orzu007, во, класс, спасибо)

Как разобраться с this в javascript окончательно?

Не совсем понимаю, почему у моей функции "say" родитель window(если бы было так, я бы все понял)? Функция "say" лежит в методе "f", метод "f" принадлежит объекту "cat".
Вот я засунул еще глубже свою функцию "say", f результат такой же. То есть теперь точно родитель не window.

const animal = {
  someProperty: "test",
  cat: {
    nickname: "Barsik",
    f() {
      function say() {
        console.log(this); // window WHY?
      }
      console.log(this); // cat OK
      say();
    },
  },
};

animal.cat.f();

Как разобраться с this в javascript окончательно?

Спасибо.
Данный момент я понимаю, и делал так, да, привязываем контекст и все отрабатывает ожидаемо.
Я скорее хочу разобраться и услышать объяснение, "почему мой вариант не работает и как вообще тогда устроен этот this, если как я много где слышал, что обычные функции (не стрелочные) берут this из того места, где были вызваны, так вот в месте, где моя функция say была вызвана, this ссылается на объект "cat", так почему тогда такое поведение?"

Как разобраться с this в javascript окончательно?

WbICHA, так суть меняется, и результат тоже меняется, при таком раскладе все логично и понятно. Мы грубо говоря скопировали тело функции cat.f и положили в переменную. После чего вызвали ее в глобальной области видимости, соответственно в this у нас в обоих случаях будет лежать ссылка на window. Тут все понятно. Непонятно почему именно так отрабатывает this при моем вызове.

Как у input type="range" сделать разные шаги, то есть что бы step изменялся, а не всегда был равен одному значению?

Ankhena, спасибо большущее)))))

Как у input type="range" сделать разные шаги, то есть что бы step изменялся, а не всегда был равен одному значению?

И если выводить в консоль значение minutesRange, то видно, что на значениях 20 и 30 ползунок останавливается дважды и действительно, когда передвигаешь его стрелками (право-лево) то на этих цифрах он как бы дважды останавливается, не переходя на следующую.

Как сделать, чтобы элемент занимал всю доступную ему ширину?

Ankhena, Дмитрий Чайников спасибо)

Как сделать, чтобы элемент занимал всю доступную ему ширину?

спасибо)