Как создать подобную функцию в JavaScript?

Question

[Илья Петров]

Есть функции, которые работают при обращении к объекту через точку (пример, функция fadeOut):
elem.fadeOut();

Как создать свою функцию, чтобы обращаться к элементу через точку, а не передавать как аргумет в скобках?

// из
rotateAndJump( elem );

// в
elem.rotateAndJump();

Answer 1

[VoidVolker]

Вот так: JavaScript -> Reference -> Classes

Либо просто добавить нужную функцию к объекту:

let o = {
    foo: function() { console.log('foo called') }
}

>> o.foo()
<- foo called

Answer 2

[SagePtr]

Если какой-то стандартный элемент расширить и добавить ему метод, то через манки патчинг прототипа:

HTMLElement.prototype.fadeOut = function() { console.log('Called fadeOut on element', this) };

Comments

[Илья Петров]

Супер! То, что нужно — прототипы)

[Aetae]

Илья Петров, только так делать нельзя в приличном обществе.:)

Если очень хочется, то, конечно, можно, но это плохая практика из-за возможных конфликтов с такими же энтузиастами либо новыми стандартными методами в следующих версиях языка.

Для чего-то своего, то принято делать свой же класс(можно наследоваться от стандартного):

class SuperArray extends Array {
  nonEmpty() {
    return this.filter(e => e === 0 || (e && (!e.trim || e.trim())));
  }
}

const myArr = new SuperArray();
  
myArr.push('', 1, '   ', 2, '3');
  
console.log( myArr.nonEmpty().join('-') ); // 1-2-3

[Илья Петров]

Aetae, то, что так делать нехорошо, я знаю)

А вот как правильно делать нехорошо — нет)))

[Moses Fender]

Aetae, Честно говоря, хрен редьки не слаще, и если завтра вершители JS встрамят метод Array.nonEmpty() во все браузеры, то SuperArray.nonEmpty() будет так же конфликтовать с ними.

[Aetae]

Moses Fender, уровень повреждений разный:
В случае изменения глобального прототипа нельзя будет использовать никакие новые библиотеки, нельзя и самому будет писать код с новым методом. Если же мы таки захотим обновиться - придётся переписать все места где мы применяли этот метод.
В случае использования собственного класса всё прекрасно продолжит работать и ничего переписывать не придётся.:)

Answer 3

[Сергей Соколов]

Упомянутый метод fadeOut() вероятно, из jQuery?

Там эти новые методы добавляются самим jQuery и установленными плагинами не к элементам, а к элементам-обёрнутым-в-jQuery всё-таки:

- elem.fadeOut();
+ $('selector').fadeOut();

Поэтому посмотрите, может, как писать плагины к jQuery. Именно своим плагином можно добавить новые «методы через точку».

Answer 4

[zkrvndm]

Свои собственные методы можно создавать через прототипы.

https://habr.com/ru/articles/518360/

Answer 5

[historydev]

const elem = {fadeOut: () => return 'Method working..'};
console.log(elem.fadeOut());