方法链可以像 Javascript 中内置函数的实现方式那样实现吗？

Question

我认为我在方法链接方面缺少一些东西。对我来说感觉不完整。

方法链接的工作原理是让每个方法返回this，以便可以调用该对象上的另一个方法。但是，返回值是this 而不是函数的结果这一事实对我来说似乎很不方便。

这是一个简单的例子。

const Obj = {
    result: 0,
    addNumber: function (a, b) {
        this.result = a + b;
        return this;
    },

    multiplyNumber: function (a) {
        this.result = this.result * a;
        return this;
    },
}

const operation = Obj.addNumber(10, 20).multiplyNumber(10).result
console.log(operation)

要点：

1. Obj.addNumber(10, 20).multiplyNumber(10) 链中的每个方法都返回 this。
2. 链的最后一部分.result 是返回this 以外的值的部分。

这种方法的问题在于，它需要您附加一个属性/方法才能在末尾获得一个值而不是this。

将此与 JavaScript 中的内置函数进行比较。

const str = "  SomE RandoM StRIng  "

console.log(str.toUpperCase()) // "  SOME RANDOM STRING  "
console.log(str.toUpperCase().trim()) // "SOME RANDOM STRING"
console.log(str.toUpperCase().trim().length) // 18

要点：

1. 链中的每个函数都返回函数的结果，而不是this（也许这是在幕后完成的）
2. 在链的末尾不需要任何属性/方法来获得结果。

我们可以实现方法链接以像 Javascript 中的内置函数一样运行吗？

Answer 1

首先，您的每个 console.log 都没有正确返回：

console.log(str.toUpperCase.trim) //undefined

它返回 undefined 因为 str.toUpperCase 返回函数对象并且不执行函数本身所以它不会工作
唯一正确的用法是

console.log(str.toUpperCase().trim()

现在关于您的问题，没有结果很容易做到，而且效率更高。
javascript 中的所有内容都有一个名为 valueOf() 的方法，这是我为数字调用类似的所有内容的示例，尽管我更喜欢只创建函数而不是对象。

const Obj = {
    addNumber: function (a = 0) {
        return a + this.valueOf();
    },

    multiplyNumber: function (a = 1) {
        return a*this.valueOf();
    },
}
const nr = 2;
Object.keys(Obj).forEach(method => {
    Number.prototype[method] = Obj[method];
})
console.log(Number.prototype); // will print out addNumber and multiplyNumber
// Now You can call it like this
console.log(nr.addNumber().multiplyNumber()); // Prints out 2 because it becomes (nr+0)*1
console.log(nr.addNumber(3).multiplyNumber(2)) // Prints out 10;

Answer 2

我认为您误解了方法链接实际上是什么。它只是调用多个方法而不将每个中间结果存储在变量中的简写。换句话说，这是一种表达方式：

const uppercase = " bob ".toUpperCase()
const trimmed = uppercase.trim()

这样

const result = " bob ".toUpperCase().trim()

没有什么特别的事情发生。 trim 方法只是在" bob ".toUpperCase() 的结果上调用。从根本上说，这归结为运算符优先级和操作顺序。 . 运算符是一个访问器，从左到右计算。这使得上面的表达式等同于这个（用于显示评估顺序的括号）：

const result = (" bob ".toUpperCase()).trim()

无论每个单独的方法返回什么，都会发生这种情况。例如，我可以这样做：

const result = " bob ".trim().split().map((v,i) => i)

相当于

const trimmed = " bob ".trim()
const array = trimmed.split() //Note that we now have an array
const indexes = array.map((v,i) => i) //and can call array methods

那么，回到你的例子。你有一个对象。该对象在内部封装了一个值，并向该对象添加了用于操作结果的方法。为了使这些方法有用，您需要不断返回具有这些方法可用的对象。最简单的机制是返回this。如果您实际上正在尝试使对象可变，这也可能是最合适的方法。但是，如果不变性是一个选项，则可以改为实例化要返回的新对象，每个对象都具有原型中所需的方法。一个例子是：

function MyType(n) {
  this.number = n
}
MyType.prototype.valueOf = function() {
  return this.number
}
MyType.prototype.add = function(a = 0) {
  return new MyType(a + this)
}
MyType.prototype.multiply = function(a = 1) {
  return new MyType(a * this)
}

const x = new MyType(1)
console.log(x.add(1))                 // { number: 2 }
console.log(x.multiply(2))            // { number: 2 }
console.log(x.add(1).multiply(2))     // { number: 4 }
console.log(x.add(1).multiply(2) + 3) // 7

要注意的关键是您仍在使用您的对象，但是原型上的valueOf 允许您直接使用number 作为对象的值，同时仍然制作方法可用的。这在最后一个示例中显示，我们直接将 3 添加到它（不访问number）。通过将this 直接添加到方法的数字参数，在整个实现过程中都可以使用它。

Answer 3

方法链是一种在同一对象的另一个方法上调用方法的机制，以获得更清晰易读的代码。

在 JavaScript 方法链中，大多数在对象的类中使用 this 关键字来访问其方法（因为 this 关键字指的是调用它的当前对象）

当某个方法返回 this 时，它只是返回返回它的对象的一个​​实例，所以换句话说，要将方法链接在一起，我们必须确保我们定义的每个方法都有一个返回值，以便我们可以调用其他方法。

在上面的代码中，函数 addNumber 从函数调用返回当前正在执行的上下文。然后下一个函数在这个上下文中执行（引用同一个对象），并调用与该对象关联的其他函数。这是这个链接工作的必要条件。函数链中的每个函数都返回当前的执行上下文。这些函数可以链接在一起，因为之前的执行返回的结果可以进一步处理。

这是 JavaScript 的魔力和独特性的一部分，如果您来自 Java 或 C# 等其他语言，您可能会觉得这很奇怪，但 JavaScript 中的 this 关键字表现不同。

Answer 4

您可以避免this 的必要性并且能够使用Proxy object 和get-trap 隐式返回值。

Here 你会为它找到一个更通用的工厂。

const log = Logger();

log(`<code>myNum(42)
  .add(3)
  .multiply(5)
  .divide(3)
  .roundUp()
  .multiply(7)
  .divide(12)
  .add(-1.75)</code> => ${
    myNum(42)
    .add(3)
    .multiply(5)
    .divide(3)
    .roundUp()
    .multiply(7)
    .divide(12)
    .add(-1.75)}`,
  );

log(`\n<code>myString(\`hello world\`)
  .upper()
  .trim()
  .insertAt(6, \`cruel coding \`)
  .upper()</code> => ${
    myString(`hello world`)
        .upper()
        .trim()
        .insertAt(6, `cruel coding `)
        .upper()
    }`);

log(`<br><code>myString(\`border-top-left-radius\`).toUndashed()</code> => ${
  myString(`border-top-left-radius`).toUndashed()}`);

// the proxy handling
function proxyHandlerFactory() {
  return {
    get: (target, prop) => {
      if (prop && target[prop]) {
        return target[prop];
      } 
      return target.valueOf;
    }
  };
}

// a wrapped string with chainable methods
function myString(str = ``) {
  const proxyHandler = proxyHandlerFactory();
  const obj2Proxy = {
    trim: () => nwProxy(str.trim()),
    upper: () => nwProxy(str.toUpperCase()),
    lower: () => nwProxy(str.toLowerCase()),
    insertAt: (at, insertStr) => 
      nwProxy(str.slice(0, at) + insertStr + str.slice(at)),
    toDashed: () => 
      nwProxy(str.replace(/[A-Z]/g, a => `-${a.toLowerCase()}`.toLowerCase())),
    toUndashed: () => nwProxy([...str.toLowerCase()]
      .reduce((acc, v) => {
        const isDash = v === `-`;
        acc = { ...acc,
          s: acc.s.concat(isDash ? `` : acc.nextUpcase ? v.toUpperCase() : v)
        };
        acc.nextUpcase = isDash;
        return acc;
      }, {
        s: '',
        nextUpcase: false
      }).s),
    valueOf: () => str,
  };

  function nwProxy(nwStr) {
    str = nwStr || str;
    return new Proxy(obj2Proxy, proxyHandler);
  }

  return nwProxy();
}

// a wrapped number with chainable methods
function myNum(n = 1) {
  const proxyHandler = proxyHandlerFactory();
  const obj2Proxy = {
    add: x => nwProxy(n + x),
    divide: x => nwProxy(n / x),
    multiply: x => nwProxy(n * x),
    roundDown: () => nwProxy(Math.floor(n)),
    roundUp: () => nwProxy(Math.ceil(n)),
    valueOf: () => n,
  };

  function nwProxy(nwN) {
    n = nwN || n;
    return new Proxy(obj2Proxy, proxyHandler);
  }

  return nwProxy();
}

// ---- for demo ---- //
function Logger() {
  const report =
    document.querySelector("#report") ||
    document.body.insertAdjacentElement(
      "beforeend",
      Object.assign(document.createElement("pre"), {
        id: "report"
      })
    );

  return (...args) => {
    if (!args.length) {
      return report.textContent = ``;
    }

    args.forEach(arg =>
      report.insertAdjacentHTML(`beforeEnd`,
        `<div>${arg.replace(/\n/g, `<br>`)}</div>`)
    );
  };
}

body {
  font: 12px/15px verdana, arial;
  margin: 0.6rem;
}

code {
  color: green;
}