Обычный if (проверить что передали) {}
и method chain
Про method chain простой пример можно посмотреть здесь (нужно нажать решение). Смысл в том, что метод/функция возвращает this
, т.о. вы можете вызывать другие функции/методы того же объекта.
Про магию с определением того, что передали можно глянуть исходный код
Вот кусочек исходника:
// https://github.com/jquery/jquery/blob/2.2-stable/src/core.js
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}
// https://github.com/jquery/jquery/blob/2.2-stable/src/core/init.js
jQuery.fn.init = function( selector, context, root ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
...
// Handle HTML strings
if ( typeof selector === "string" ) {
...
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
...
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
...
}
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
}
...
};
Как видите, простой перебор вариантов, который в некоторых случаях возвращает this
.
Добавлено
Если я правильно понял, Вы хотите добиться подобного результата:
// Создадим функцию, которая возвращает нам новый объект "класса" worker (чтобы самим не писать new - по аналогии с jQ)
var Styler = function(selector) {
// Т.к. используем new, то у функции worker будет свой this
return new Styler.worker(selector);
};
// Добавим нашей функции Styler статическое поле worker, в котором будет храниться наш класс
Styler.worker = function(selector) {
// Назначим экземпляру объекта worker поле elements и сохраним в него список найденных элементов
this.elements = document.querySelectorAll(selector);
return this;
}
Styler.worker.prototype.css = function(name, value) {
for (var i = 0; i < this.elements.length; i++) {
// Т.к. в данный момент мы находимся в экземпляре объекта worker, то используем назначенное в конструкторе значение elements
this.elements[i].style[name] = value;
}
return this;
}
Styler('div').css('color', 'blue');
Styler('div').css('font-size', '26px');
Styler('div').css('font-family', 'Arial').css('font-style', 'italic');
<div>Подопытный DIV</div>
<div>Подопытный DIV № 2</div>
console.log($("div").__proto__)
и вижу объект с прототипом JQuery объекта, никаких чистых объектовHTMLCollection
. Если не так и я что-то не понял, можете собрать тут сниппет?init.prototype = jQuery.fn;
и комментарий к ней "// Give the init function the jQuery prototype for later instantiation" в 126,127 строках. Поэтому функции передаются в прототипе, никакой магии.