方法是否必須在要鏈接在一起的對象內？

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;
 }
}