javascript - JavaScript 中装饰器的简单解释是什么以及它在函数式编程中有何用处

Question

与 HOC 相比，JavaScript 中的装饰器是什么。

我对 HOC 有一个很好的心智模型，因此想用它作为我理解装饰器的引用框架。

提前致谢

Answer 1

我将尝试举一个简单的例子。假设你想制作一个 Animal该动物可以具有 eat 的功能, sleep和make noise 。现在，您创建一个 Dog通过扩展动物(经典继承模式)。 Dog将覆盖 make noise函数为 bark , eat至carnivores等等。一头牛会覆盖 make noise函数为 Moo , eat至herbivores 。这一切都很好，但接下来就是 Mountain Dog甚至没有make noise 。我们要做的就是选择 make noise函数并将其放入 Cow和 Dog ，我们在 make noise 的类中有不同的函数。这是一个简单的示例，其中经典继承使代码容易出现不可扩展性，因为需求一直在变化，而函数式编程可以通过 decorator 来解决这个问题。图案。对于上面的例子，我不会关心 type的动物。我将为每个功能设置不同的功能。

function eat(type) {
    //I'm carnivores, herbivores
    console.log(`I'm ${type}`);
}

function makeNoise(noise){
    //bark, Moo
    console.log(`I ${noise}`);
}

function sleep(sleepingWay){
    console.log(`I ${sleepingWay}`);
}

Now, we can define animals as by decorating empty `Animal` as: 

cow = compose(eat('herbivores'), makeNoise('Moo'))(Animal)
dog = compose(eat('carnivores'), makeNoise('Bhu'), sleep('at day'))(Animal)
mountainDog = compose(eat('carnivores'), sleep('at day'))(Animal) //I don't make noise

我没有编写实际的代码。我只是给出一个关于为什么我们应该使用它的想法。

使用函数式编程的另一个好处是，测试变得非常容易，因为您必须测试各个函数，并且在 React 中进行编码时，它可以节省大量时间和精力。我用recompose一直，甚至不使用 class关键词。

你必须注意所有的函数都是 pure状态是immutable 。希望这可以帮助。如果您需要进一步了解，请告诉我