Что в данном примере передается через this?

Question

[attain]

Доброго времени суток! Я новичок в JS.
Вот здесь приведен следующий кусок кода:

function selectorMatches(el, selector) {
	var p = Element.prototype;
	var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
		return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
	};
	return f.call(el, selector);
}

Я понимаю, что при .call первый переданный параметр означает контекст.
То есть в итоге

return [].indexOf.call(document.querySelectorAll(s), this) !== -1;

станет

return document.querySelectorAll(s).IndexOf(this) !== -1;

Но как это коррелирует с самим вызовом в строке с return f.call(element, selector);?
Как в качестве контекста будет использован переданный element? и разве это не простой аналог querySelectorAll(selector) получается?

Answer 1

[Demian Smith]

Вы всё верно поняли, по идеи

[].indexOf.call(document.querySelectorAll(s), this)

то же что и
document.querySelectorAll(s).indexOf(this)

Но document.querySelectorAll() возвращает коллекцию типа NodeList и это не тоже самое что Array, поэтому у неё отсутствует свой метод indexOf(). Так что конструкция [].indexOf.call(document.querySelectorAll(s), this) - это такой хитрый способ выполнить indexOf над объектом у которого нет метода indexOf. Я так подозреваю что где-то в недрах indexOf() превращает this в массив при помощи Array.from(). В этом можно убедиться, например, получив "1" при выполнении [].indexOf.call('abc', 'b') и "-1" при выполнении [].indexOf.call(1, 1).

По-хорошему изначальную конструкцию можно переписать в

Array.from(document.querySelectorAll(s)).indexOf(this)

Тогда она будет вызывать меньше вопросов.