javascript - 方法是否必须在对象内才能链接在一起？

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

My question is why is the first constructor function able to chain functions without having the methods within an object...

它们的方法在对象中，因为对象继承自它的原型(prototype)，而方法是在原型(prototype)上定义的。

Do methods have to be within an object to be chained together?

根据定义，方法只能在对象上访问(或者 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在那个元素上。