Shulou(Shulou.com)05/31 Report--

This article mainly explains the "JavaScript decorator mode how to use", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "JavaScript decorator mode how to use" it!

The decorator pattern must be familiar: it allows you to add new functionality to an existing object without changing its structure. it is a structural pattern and is a wrapper for an existing class.

This pattern creates a decoration class that wraps the original class and provides additional functionality while maintaining the integrity of the class method signature.

In JS, Decorator is a new syntax in ES7, which can modify classes, methods, and properties to customize some related functions. The way it is written is very similar to Java's Annotation, but it is still very different in function.

Code example:

Do not use decorators:

Const log = (srcFun) = > {if (typeof (srcFun)! = = 'function') {throw new Error (`the param must be a function`);} return (. Arguments) = > {console.info (`${srcFun.name} invoke with ${arguments.join (',')}`); srcFun (.. const plus);}} const plus = (a, b) = > a + BTX Const logPlus = log (plus); logPlus (1line 2); / / plus invoke with 1Q

Use the decorator:

Const log = (target, name, descriptor) = > {var oldValue = descriptor.value;descriptor.value = function () {console.log (`Calling ${name} with`, arguments); return oldValue.apply (this, arguments);}; return descriptor;} class Math {@ log / / Decoratorplus (a, b) {return a + b;} const math = new Math (); math.plus (1jue 2); / / Calling plus with 1j 2

As can be seen from the above code, if sometimes we do not need to care about the internal implementation of the function, but just want to call it, the decorator can bring better readability and is very convenient to use.

/ / readonly decorator import {readonly} from 'core-decorators';class Fudao {@ readonlytitle =' Aids;} var fudao = new Fudao (); fudao.title = 'baked; / / This will log error & doesn't work

The decorator in JS is also a function in nature, using the descriptor of object in JS

The decoration class and the decorated class can develop independently and will not be coupled with each other. The decoration mode is an inherited alternative mode, and the decoration pattern can dynamically expand the function of an implementation class.

Thank you for your reading, the above is the content of "how to use JavaScript decorator mode". After the study of this article, I believe you have a deeper understanding of how to use JavaScript decorator mode, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.