方法是否必须在要链接在一起的对象内？

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");链接这些方法zappo(#main).addClass("green").addClass("red");

我的问题是，为什么第一个构造函数不能在对象内包含方法的情况下就能链接函数，而第二个函数却要求所有方法都在对象内？

Answer 1

我的问题是为什么第一个构造函数能够在没有对象内包含方法的情况下链接函数...

他们的方法是在对象，因为该对象从它的原型继承，并且所述方法对原型定义。

方法是否必须在要链接在一起的对象内？

按照定义，方法只能在对象（或有效但不能从字面上提升为对象的JavaScript的原语）上访问，因为否则我们将其称为函数，而不是方法。

方法链接没有什么特别的。 所有你正在做的，当你做xa().b()被调用a对x ，然后调用b上不管它是a回报。 在您的class示例中，每个方法均return this因此每个方法均返回被调用的对象。 但是，当a返回不是 x的对象时，您也可以轻松使用xa().b() 。 这实际上很常见。 例：

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

querySelector不返回document ，它返回找到的元素。 上面假设将找到并返回一个元素（而不是querySelector返回null ），并在该元素上调用addEventListener 。

Answer 2

不需要它：

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

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