链接方法并将结果传递给 Javascript 中的下一个链函数

Question

我有这段示例代码：

let test = {

  result: '',

  bolder: function (str = this.result) {
    this.result = '<b>' + str + '</b';
    return test;
  },

  italic: function (str = this.result) {
    this.result = '<i>' + this.result + '</i';
    return test;
  },
}

console.log(
  test.bolder('text').italic()
)

/*
RESULT: 
{
  result: '<i><b>text</b</i',
  bolder: [Function: bolder],
  italic: [Function: italic]
}

EXPECTED:
'<i><b>text</b</i'
*/

我在 'bolder' 函数中传递一个字符串，添加一些环绕文本（return 需要类似于 '< b >text'），然后我需要结果传递给下一个链式函数 'italic'，因此它可以获取“文本”并附加更多内容，如“文本 '，然后 return 这个新值传给下一个函数，依此类推。如果没有值作为参数传递，那么我假设我需要格式化'result'中的值，所以它是默认值。

但问题是：当我尝试记录值时 return 是整个对象 'test'，包含所有函数和内容，而不是格式化字符串 '< i > < b > text'.

我怎样才能做到这一点？

Answer 1

您需要最后一次调用才能获得结果，可能需要使用自己的 toString 方法。

let test = {
    result: '',

    bolder: function (str = this.result) {
        this.result = '<b>' + str + '</b>';
        return this;
    },

    italic: function (str = this.result) {
        this.result = '<i>' + this.result + '</i>';
        return this;
    },

    toString: function () {
        return this.result;
    }
};

console.log(test.bolder('text').italic().toString());

Answer 2

您正在将结果分配给名为 result 的属性 - 只需在函数调用结束时访问属性

您还缺少函数中的结束符 >

let test = {
  result: '',

  bolder: function (str = this.result) {
    this.result = '<b>' + str + '</b>';
    return test;
  },

  italic: function (str = this.result) {
    this.result = '<i>' + this.result + '</i>';
    return test;
  },
}

console.log(test.bolder('text').italic().result)

Answer 3

覆盖 toString() 是要走的路。

您可以显式调用它，但它的优点是当您将它转换为字符串时会自动调用它，如 Java 或 C#。

let test = {
    result: '',

    bolder: function (str = this.result) {
        this.result = '<b>' + str + '</b>';
        return this;
    },

    italic: function (str = this.result) {
        this.result = '<i>' + this.result + '</i>';
        return this;
    },

    toString: function () {
        return this.result;
    }
};

console.log("" + test.bolder('text').italic());

// oh and from ES6, you can use template literals
// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
console.log(`use with template literal: ${test.bolder('text').italic()}`);

链接方法并将结果传递给 Javascript 中的下一个链函数

Chaining methods and pass the result for the next chain function in Javascript

javascript

method-chaining

node.js