JavaScript Decorators and Auto-Accessors
A walkthrough of how to create JavaScript decorators and how using auto-accessors helps improve your developer experience.
Table of Contents
- Context and Specification
- Preface
- Auto-Accessors
-
Creating Decorators
- A Simple Decorator
- Validation With Decorators
- Decorator Options
- Metadata
Context and Specification
The Decorators Proposal on GitHub already does a great job of breaking down the basic use-cases of decorators. My goal isn't to recreate those examples there, but instead to highlight some lesser-known features and interactions. Additionally, in the next article in this series I'll highlight how to compose or chain multiple decorators on a single class property.
Preface
Each code sample will come with a link to an interactive Babel REPL playground, so you can try it for yourself without needing to set up a polyfill or spin up a repo. The "Evaluate" option in the top left (under Settings) should be checked in all my examples, which means that you will be able to see the code, edit it, open your browser's dev console, and see the logs / results there.
You don't need to pay attention to the transpiled code on the right-hand side of the Babel REPL, unless you want to dig into the polyfill for decorators. The left-hand side of the Babel REPL is where you can edit and write code to try out for yourself.
To emphasize, your developer tools' console should show console logs. If it doesn't, make sure that Evaluate is checked in the top left.
Auto-Accessors
An important feature of the Decorators spec are auto-accessors. We'll start with learning what they are and how using auto-accessor will make writing decorators easier.
The the Decorators Proposal outlines auto-accessor here. But ultimately it's a simple feature; let's look at a basic working example: Babel REPL.
class MyClass { accessor myBoolean = false }
In this class definition the accessor keyword goes before the property name. However, this hasn't really changed anything about the property yet - next, we'll see how useful auto-accessors are when combined with decorators.
(Note that you can also use static with auto-accessors, such as static accessor myBoolean = false)
Creating Decorators
To better understand why we're using an auto-accessor, let's build some decorators.
A Simple Decorator
We'll start by combining auto-accessors with a decorator that doesn't actually do much, in order to get an idea of the syntax.
Here's a functional decorator that keeps an internal variable, and allows you to get and set that variable through the property on the class: Babel REPL
function simpleDecorator(value, context) { let internalValue = false return { get() { return internalValue }, set(val) { internalValue = val return internalValue } } } class MyClass { @simpleDecorator accessor myBoolean }
This decorator returns an object with two methods: get() and set(). This is how a decorator for an auto-accessor can "decorate" or wrap both the setter and the getter for a property in a single place; we don't have to create a simpleGetterDecorator and simpleSetterDecorator. Instead, we've combined them into a single definition with auto-accessors, which is easier.
In the end, this looks like a fairly normal function so far - which is great for an introduction!
Validation With Decorators
To set us up for the rest of the article, let's update our decorator so that it actually does some sort of validation. We'll make a decorator that only allows you to set even numbers and nothing else. Here's what that would look like: Babel REPL
function onlyEvenNumbers(value, context) { let internalNumber = 0 return { get() { return internalNumber }, set(val) { const num = Number(val) if(isNaN(num)) { // don't set the value if it's not a number or coerced to a number return internalNumber } if(num % 2 !== 0) { // don't allow odd numbers return internalNumber } internalNumber = val return internalNumber } } } class MyClass { @onlyEvenNumbers accessor myEvenNumber }
So we add logic to the set() method and now anyone trying to set the myEvenNumber property on our class will go through that validation logic. Nice.
Decorator Options
Now that we have a nice only-evens decorator, let's make it handle both even and odd numbers with an option to configure which type of number we want!
Fortunately, because this is fairly-normal-looking JavaScript we're writing here, it's not too hard to configure it to work this way. We wrap the original decorator with a function that takes in an option, and then return the decorator. Babel REPL
function evensOrOdds(onlyEvens = true) { return function decorator(value, context) { let internalNumber = 0 return { get() { return internalNumber }, set(val) { const num = Number(val) if(isNaN(num)) { // don't set the value if it's not a number return internalNumber } if(num % 2 !== (onlyEvens ? 0 : 1)) { return internalNumber } internalNumber = val return internalNumber } } } } class MyClass { @evensOrOdds(true) accessor myEvenNumber @evensOrOdds(false) accessor myOddNumber }
We've now configured our decorator to take in arbitrary options, which allows users of our decorator to customize its behavior. Yay.
Metadata
One additional tool your decorators can utilize is context.metadata. This object is passed to each decorator and you could use it for a variety of things, but you need to be careful because the metadata object is the same for all invocations of every decorator.
Continue Learning
Continue to the next post in the series to learn how to compose (or apply multiple) decorators to a single property!
The above is the detailed content of JavaScript Decorators and Auto-Accessors. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
