Должны ли методы быть внутри объекта, который должен быть соединен?

Question

Я пытаюсь понять, как работают функции связывания в JavaScript.У меня есть два примера:

Первый

    class Arithmetic {
      constructor() {
        this.value = 0;
      }
      add(value) {
        this.value = this.value + value;
        return this;
      }
     subtract(value) {
     this.value = this.value - value;
     return this;
     }
   }

Вы можете сделать цепочку методов, создав let a = new arithmetic(); и a.add(3).subtract(4);

Второй

var zappo = function(selector) {
  var el;

  var obj = {
    getEl(selector) {
    return document.querySelector(selector);
    },
    addClass(className){
    el.classList.add(className);
    return this;
    }
  }

  el = getEl(selector);
  return obj;
}

Я могу связать эти методы с помощью zappo(#main).addClass("green").addClass("red");

Мой вопрос заключается в том, почему первая функция-конструктор способна связывать функции без использования методов внутри объекта, тогда как вторая функция требует, чтобы все методы были внутри объекта

Answer 1

Не требует:

 class zappo {
  constructor(selector) {
    this.el = document.querySelector(selector);
  }

  addClass(className){
   this.el.classList.add(className);
   return this;
 }
}

Answer 2

Мой вопрос заключается в том, почему первая функция-конструктор может связывать функции, не имея методов внутри объекта ...

Эти методы являются в объекте, потому что объект наследует от своего прототипа, а методы определены на прототипе.

Должны ли методы быть внутри объекта, который должен быть объединен в цепочку?

ByПо определению, методы доступны только для объектов (или примитивов JavaScript, которые эффективно, но не буквально повышаются до объектов), потому что в противном случае мы называем их функциями, а не методами.

Цепочка методов не является чем-то особенным.Все, что вы делаете, когда делаете x.a().b(), это звоните a на x, а затем вызываете b на том, что это a, возвращается.В вашем примере class каждый метод выполняет return this, поэтому каждый возвращает объект, для которого он был вызван.Но вы также можете легко использовать x.a().b(), когда a возвращает объект, который не x.Это на самом деле очень распространено.Пример:

document.querySelector("div").addEventListener(/*...*/);

querySelector не возвращает document, он возвращает найденный элемент.Выше предполагается, что элемент будет найден и возвращен (а не querySelector, возвращающий null) и вызовет addEventListener для этого элемента.