Как в ванильном JS строить цепочки функций?

Question

[Ричард Хендрикс]

Как в ванильном JS строить цепочки функций, чтобы их можно было крепить друг к другу как в примере ниже?

Answer 1

[Андрей Седышев]

Паттерн, о котором вы говорите, называется Fluent interface

Собственно, ссылка ведёт на пример реализации:

var Car = (function(){

	var speed, color, doors, pub;
		 
	function setSpeed(new_speed) {
		speed = new_speed;
		return pub;
	}
	 
	function setColor(new_color) {
		color = new_color;
		return pub;
	}
	 
	function setDoors(new_doors) {
		doors = new_doors;
		return pub;
	}

	pub = {
		'setSpeed': setSpeed,
		'setColor': setColor,
		'setDoors': setDoors,
	};

	return pub;

})
	
// Обычная реализация
myCar2 = Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
	 
// Текучий интерфейс
myCar = Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);

Comments

[Ричард Хендрикс]

Зачем дополнительные скобки вокруг function?

[Андрей Седышев]

Ричард Хендрикс, нужно спросить об этом у автора кода на русской wiki - скорее всего такой стиль написания кода. Видимо, автор привык часто использовать IIFE. В английской wiki более современный пример кода, с использованием ES6 classes.

Answer 2

[Алексей]

Создаешь класс, пишешь в нем методы, возвращаешь контекст (точнее этот же объект). Вот собственно говоря и все...

Comments

[Николай Чуприк]

Типа так?

function abc()  {
  ...
  return this;
}

[Алексей]

Николай Чуприк, да так, только повторюсь - это не просто функции должны быть, а методы класса. Чтобы этот самый this был.

Answer 3

[Vitaliy Orlov]

String.prototype.abc = function(){
    return this + '-abc';
}

console.log('123'.abc().trim().abc());

// Результат: 123-abc-abc