Как работает метод this в данном примере?

Question

[Andrew Garfield]

Объясните пожалуйста, что возвращают методы up(), down() и showStep() .
И почему если мы возвращаем в методе up() this, то мы можем не писать заново

ladder.up();
ladder.up();
ladder.down();

а просто ladder.up().up().down().up().down().showStep();

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}

ladder.up().up().down().up().down().showStep(); // 1

Answer 1

[hzzzzl]

что возвращают методы

возвращают этог самый объект ladder с измененным значением step, поэтому можно к этому же объекту прицепить следующий метод, который опять изменит этот же самый step

почему если мы возвращаем в методе up() this, то мы можем не писать заново

почему не можем?

ladder.up()
// {step: 1, up: ƒ, down: ƒ, showStep: ƒ}  один
ladder.up()
// {step: 2, up: ƒ, down: ƒ, showStep: ƒ}  два

Comments

[Andrew Garfield]

Получается запись ladder.up().up().down().up().down().showStep(); эквивалентна записи

ladder.up()ladder.up()ladder.down()ladder.up()ladder.down()ladder.showStep();
// я понимаю, что запись неправильна, просто хочу понять логику действий)

просто мы не повторяем имя объекта, потому что он уже возвращается в методе?

[hzzzzl]

Andrew Garfield, так точно

JavaScript

Цепочка метода - это стратегия программирования, которая упрощает ваш код и украшает его. Цепочка метода выполняется путем обеспечения того, чтобы каждый метод объекта возвращал весь объект, вместо того, чтобы возвращать один элемент этого объекта

serganbus.github.io/d3tutorials/chaining_methods.html
https://ru.code-basics com/languages/javascript/modules/properties/lessons/chain-of-methods

[Andrew Garfield]

Понял теперь. Спасибо большое!

Answer 2

[fgvnovoross]

В объекте ladder есть несколько значение step изначально равное нулю и 3 функции.
Первая (up) - берёт объект ladder (в котором сама находится) через this, находит там значение step и увеличивает его на 1, после чего возвращает новое значение всего объекта (ladder).
Вторая (down) делает тоже что и первая, но уменьшает на 1 а не увеличивает.
Третья берёт step из объекта через this, делает alert (открывает диалоговое окно) в котором написано значение step, возвращает значение объекта ladder.

Функции эти можно использовать как:

ladder.up(); // 1
ladder.up(); // 2
ladder.down(); // 1
ladder.down(); // 0
ladder.showStep(); // 0

, так и так:

ladder.up().up().down().down()showStep(); // 0

Объяснение:

Мы обращаемся к ladder и используем функцию up. Единственное что она делает, это увеличивает значение ladder.step и после её использования объект ladder как и был объектом со значением step и функциями, так и остался. Изменяется только step. return у всех этих функций возвращение всего объекта ladder, а значит... Напримеррр:
ladder.up().up() делает тоже самое, что и ladder.up(), но дважды.
ladder.up().down() делает ТОЖЕ что и ladder.up(); ladder.down();

ВОТ! Я не знаю с чего вы взяли что нельзя писать заного. Здесь просто это упрощено, чтобы писать заного было необязательно и можно было сократить количество строк кода!