Как сделать цепную функцию самостоятельно на JS?

Question

[Dubrovin]

Хочу создать простую функцию, назовём её myfunc, которая позволит хранить внутри себя методы и вызывать их по цепочке (chained), например:

myfunc().find( '.selector').on('click', func).css('somecsshere').

Точно также как это сделано в jQuery только со своим набором методов.
Как это можно сделать с минимальным количеством строк и, возможно, с es6 классами?
p.s. Прошу не предлагать готовые решения, пересмотрел их кучу и не понимаю, как это работает (а я хочу именно понять, как это работает в первую очередь), прошу привести короткий кусок кода, который это реализует с пояснениями.

Answer 1

[Roman Domoratskii]

Вам нужно каждый раз возвращать текущий объект. Это делается добавлением return this в конце каждого метода.

var life = {
  day: 0,
  up() {
    this.day++;
    return this;
  },
  down() {
    this.day--;
    return this;
  },
}

life.up().up()
console.log(life.day) //2

Comments

[Dubrovin]

Смотрите, допустим, у меня есть метод find, который просто является обёркой над querySelector и я хочу использовать вот такой синтаксис: life( selector ).doSomething().doSomethingElse().
При каждом новом вызове life внутри возвращаемого объекта селектор должен устанавливаться из параметра selector. При такой реализации как у вас так не получается.

[Roman Domoratskii]

Dubrovin, например так https://jsfiddle.net/9a9h4wmo/. Прогуглите "Цепочка вызовов"

[Dubrovin]

Roman Domoratskii, гуглил, не помогает.

Упёрся в то, что у возвращаемого объекта цепочки отсутствуют необходимые свойства и методы, т.е. если мне нужно, например, у input получить value, то я не могу сказать life( input ).value вместо этого нужно писать life( input ).el.value что не очень удобно, так как на этом цепочка обрывается. Выходит что нужно руками перегружать все необходимые методы.

Сейчас получился вот такой код:

function k( selector ) {
	class K {
		constructor( selector ) {
			if ( ( selector === window ) || ( selector instanceof Node ) || ( selector instanceof HTMLElement ) ) {
				this.el = selector;
			} else {
				this.el = document;
				this.find( selector );
			}
		}

		find( selector ) {
			console.log( selector );
			this.el = this.el.querySelector( selector );
			return this;
		}

		on( event, handler ) {
			this.el.addEventListener( event, handler );
		}

		off( event, handler ) {
			this.el.removeEventListener( event, handler );
		}

	}

	return new K( selector );
}

export default k;

[Дмитрий Поляков]

Roman Domoratskii, а что обозначает такая запись:
const $ = (selector) => {

const $ = (selector) => {
  const elements = document.querySelectorAll(selector);
  return new Jquery(elements);
}

Это короткая запись такого кода?

const $ = function(selector) {
  const elements = document.querySelectorAll(selector);
  return new Jquery(elements);
}

[Дмитрий Поляков]

По сути, будет происходить то же самое что и в jq. Будет возвращаться уже не DOM элемент, а объект, типа как в jq. Смысл тогда таких телодвижений?