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

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

它们的方法在对象中，因为对象是从其原型继承的，并且方法是在原型上定义的。

方法必须位于对象内才能链接在一起吗？

根据定义，方法只能在对象（或有效但不能从字面上提升为对象的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。

Answer 2

不需要：

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

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

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

2 个答案: