В этой статье мы обсудим цепочку методов в JS. Это можно использовать в большинстве мест, где вам нужно использовать один и тот же контекст. Это наиболее часто используемое понятие в JavaScript и тесно связано с ключевым словом this. Также это позволяет запускать несколько методов для одного и того же элемента в рамках одного оператора, и вы можете выполнять несколько операций одновременно.

Давайте начнем с концепции и ее примера. Сначала вы должны познакомиться с концепцией и использованием ключевого слова this в JS.
Если вы уже знакомы с затем вы можете продолжить, иначе потратьте некоторое время на то, чтобы понять основную потребность и использование this, и вернитесь сюда.

Потому что все дело в этом ключевом слове в JS:

Давайте сначала проясним или вспомним некоторые основы this в JS.
1. Ключевое слово JavaScript this относится к объекту, которому оно принадлежит.
2. В методе this относится к объекту-владельцу.
3. В одиночку this относится к глобальному (оконному) объекту.
4. В функция this относится к глобальному (оконному) объекту.
5. В функции в строгом режиме this равно undefined.
6. В событии this относится к элементу, получившему событие.
7. Такие методы, как call() и apply(), могут ссылаться this на любой объект.

Концепция и пример объединения методов:

Давайте сначала посмотрим, как выглядит цепочка методов. В большинстве случаев при работе с массивами вы видели, что мы можем применять несколько методов к одному и тому же массиву одновременно.
например
Есть требование, по которому мы должны возвращать имена пользователей, чей id ›2. здесь, в решении, вы можете заметить, что методы filter () и map () вызываются одновременно.

Теперь при выполнении сначала будет вызван filter () для фильтрации элементов массива с условием, а затем будет вызвана map () для возврата имен из массива.

Пример и объяснение:

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

Следующий шаг - убедиться, что мы можем вызвать другой метод для возвращаемого значения первого метода. например в нашем примере add().sum() Для этого мы должны возвращать this из всех методов, кроме value(), потому что value() возвращает результат нашей операции. Возвращая это из каждого метода, мы вернем объект, в котором мы сможем найти все нужные нам методы.

Имущество:

В этом примере мы собираемся использовать одно свойство с именем res в первом примере и value во втором примере. Это свойство используется для получения результата вызовов функций нашей цепочки, сохранения результата каждого вызова функции и доступа к нему в конце цепочки.
Это свойство также вызывается как свойство экземпляра, и оно будет уникальный для всех экземпляров. Означает, что мы создаем несколько объектов, например.
var m = math ();
var op = math ();
Тогда свойство «res» для m и op будет уникальным. и этим значением можно управлять независимо. Поскольку при использовании ключевого слова this свойство будет добавлено ко всем экземплярам, ​​например this.property = “some_value”, и гарантирует, что оно не будет передано другим экземплярам.

Давайте рассмотрим пример арифметических операций, таких как: сложение, вычитание, умножение, деление и сумма всех указанных параметров.
Есть несколько способов добиться этого. это использование функции, использование прототипа и использование класса ES6. Я объясню это с помощью функции и прототипа. вы, ребята, можете попробовать сделать это с помощью класса.

Использование функции (не стрелочной функции):

function math() {
  var res = 0;
  return {
    value: function () {
      return res;
    },
    add: function (val) {
      res = res + val;
      return this;
    },
    sub: function (val) {
      res = res - val;
      return this;
    },
    mul: function (val) {
      res = res * val;
      return this;
    },
    div: function (val) {
      res = res / val;
      return this;
    },
    sum: function (...args) {
      res = res + args.reduce((pre, val) => {
        return pre+ val;
      }, 0);
      return this;
    },
  }
}
var m = math();
console.log(m.add(100).mul(10).sub(250).div(25).value());
console.log(m.sum(10,50,88).value());
/*
   1. It will add 100     value = 100
   2. Then multiply by 10   value = 1000
   3. Then subtract by 250   value = 750
   4. Finally divide by 25     value = 30
    So 30 will be logged for the first console.
 Then again we are applying sum(10,50,88).
 So the result will be 10+50+88 = 148 and the previous 30. 
 Means 30+148 = 178 will be logged for the second console.
*/

Использование прототипа:

function Math() {
 this.value = 0;
}
Math.prototype.add = function(val){
 this.value = this.value + val;
   return this;
}
Math.prototype.sub = function(val){
 this.value = this.value - val;
   return this;
}
Math.prototype.mul = function(val){
 this.value = this.value * val;
   return this;
}
Math.prototype.div = function(val){
 this.value = this.value / val;
   return this;
}
Math.prototype.sum = function(...params){
 this.value = params.reduce((pre, val) => {
     return pre+ val
    },this.value);
   return this;
}
let m = new Math();
console.log(m.add(110).sub(10).sum(10,10,10,10).value);
/*
    Same thing applies here as well it will add 110 then subtract 10         from it and again add 40 to the result using sum(10,10,10,10. and then returns final result.
    Which is 140
*/

значение():

Если вы не знаете о valueOf (), нажмите здесь, чтобы узнать больше. Этот метод возвращает примитивное значение указанного объекта. JavaScript внутренне вызывает этот метод объекта для преобразования объекта в примитивное значение. JavaScript автоматически вызывает его, когда находит объект, в котором ожидается примитивное значение. Даже вы можете вызывать этот метод для объекта всякий раз, когда вам нужно, но это не обязательно.

Итак, давайте перейдем к нашему примеру, мы можем избежать .value вызова метода цепочки из примера-прототипа add().sum().value, добавив valueOf () в прототип объекта. Нам просто нужно добавить следующий фрагмент:

Math.prototype.valueOf = function() {
  return this.value;
}
const m = new Math();
console.log(+m.add(110).sub(10).sum(10,10,10,10));
// This will also return the same result. Which is 140.

Даже нам не нужен такой шаблон или реализация в нашем повседневном программировании, но это может быть более полезным, чтобы прояснить нашу концепцию цепочки методов, а также кое-как проясняет концепцию this ключевое слово в JS.

Если вы нашли что-то полезное из этой статьи или узнали что-то из нее, не стесняйтесь поделиться в своей сети. И поаплодируем. Это моя первая попытка что-то написать.