问链式函数变成了单例函数。如何预防
EN

Stack Overflow用户

提问于 2021-02-23 23:14:12

回答 1查看 90关注 0票数 0

请注意:这是我即将提出的问题的超级简化版本.写完这个问题后，我决定把它分成几个问题。

我正在尝试实现一个可链接的函数。什么是预期的输出目前并不重要，但是做的是我试图提供的API。

首先，我试图实现一个可以与自身链接的函数。让我们考虑一个函数，它接受颜色作为字符串并通过调用方法log()输出它。但是，如果我们在自己上调用这个函数(链式)，它现在应该输出2颜色。如果我们将它链接3次-- log()方法应该输出3种颜色，例如…

function getColor(color: string) {
    if (getColor.prototype.color) {
        getColor.prototype.color = getColor.prototype.color + " " + color
    } else {
        getColor.prototype.color = color
    }


    return {
        log: () => {
            console.log(getColor.prototype.color)
        },
        getColor: (color: string) => {
            return getColor.call(getColor, color)
        }
    }
}

getColor('red').getColor('blue').getColor('green').log() // Must be "red blue green"

getColor('yellow').log() // Must be "yellow"

我决定要做的是将颜色存储在原型中，然后检查它是否存在。如果我们已经有颜色，那么我们就给它添加一个新的颜色。然而，由于它，我的功能变成了独生子女。我真的不明白我是如何做到这一点的，但是getColor.prototype.color被从一个调用传递到另一个…

getColor('red').getColor('blue').getColor('green').log() // "red blue green" - GOOD!

getColor('yellow').log() // "red blue green yellow" - WAT?

据我所知-如果我修改了原语一次，那么它仍然是修改的。

我想要实现的是能够将功能与自身联系起来。

和

只有当我从它本身调用函数时，颜色才会被叠加。因此，从根本上说，某些逻辑只在getColor().getColor情况下触发，而在getColor()中不触发。

javascript

node.js

typescript

音视频体验馆免费体验试用

一站式·全方位体验音视频产品，所见即所得，30分钟即可上线同款能力

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-24 01:01:45

首先，我正在尝试实现一个可以与其自身链接的函数。

让我们翻译一下:您正在尝试编写一个函数，该函数返回一个具有函数(“方法”)的对象实例，该函数再次返回一个对象实例etc.pp。

创建对象实例的函数通常称为工厂函数。

function getColor(color) {
    return new Color(color);
}

现在，Color实例可以有一个方法，如add()，它向当前颜色添加新颜色。对于一个流畅的接口(或“链接”)，这再次需要返回一个对象实例。现在，让我们返回相同的对象。

function Color(color) {
    this.color = color;
    this.add = function (color) {
       this.color += ' ' + color;
       return this;
    }
}

现在你可以：

getColor('red').add('green').add('blue');    // => now contains 'red green blue';
new Color('red').add('green').add('blue');   // => same thing

如果不想改变Color实例，请将.add()转换为另一个工厂：

function Color(color) {
    this.color = color;
    this.add = function (color) {
       return new Color(this.color + ' ' + color);
    }
}

用法不变。

只有当我从它本身调用函数时，颜色才应该被堆叠。

我避免将独立工厂getColor()称为类内部工厂.add()，因为它们所做的事情不同。但.add()已经满足了这一要求。

为了避免在每个类实例上都有一个单独的.add()，让我们将它移到原型中。让我们还包括一个fluent .log()方法，并作为一个变体，包含一个类方法.get()，它取代了getColor()工厂的独立功能：

function Color(color) {
    this.color = color;
}
Color.prototype.add = function (color) {
    return new Color(this.color + ' ' + color);
};
Color.prototype.log = function () {
    console.log(this.color);
    return this;
};
Color.get = function (color) {
    return new Color(color);
};

用法：

Color.get('red').log().add('green').log().add('blue').log();
new Color('red').log().add('green').log().add('blue').log();

如果您更喜欢ES6类的语法：

class Color {
    constructor (color) {
        this.color = color;
    }
    add (color) {
        return new Color(this.color + ' ' + color);
    }
    log () {
        console.log(this.color);
        return this;
    }
    static get(color) {
        return new Color(color);
    }
}