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

Question

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

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

提前致谢

Answer 1

我将尝试举一个简单的例子。假设您想要制作一个Animal，并且该动物可以具有eat、sleep 和make noise 的功能。现在，您通过扩展 animal(经典继承模式)来创建 Dog。 Dog 将覆盖 make noise 函数为 bark，eat 为 carnivores 等。奶牛会将 make noise 功能覆盖到 Moo，将 eat 覆盖到 herbivores。这一切都很好，但随后 Mountain Dog 甚至没有发出声音。我们要做的是选择 make noise 函数并将它放在 Cow 中，对于 Dog，我们在 的类中有不同的函数发出声音。这是一个简单的示例，其中经典继承使代码容易出现不可扩展性，因为需求一直在变化，而这正是函数式编程使用 decorator 模式来拯救的时候。对于上面的例子，我不会关心动物的类型。我将为每个功能设置不同的功能。

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 关键字。

您必须注意所有函数都是纯并且状态是不可变。希望这可以帮助。如果您需要进一步了解，请告诉我