JavaScript Decorators
What comes to mind when you hear the word, decorator?
You may think of balloons at a birthday party or jewelry, something that is added to an existing thing to make it more beautiful.
In JavaScript, decorators wrap one piece of code around another. This can be done by using a function to wrap another function. Since there aren’t any balloons or jewelry items to decorate within JavaScript, we use functions to achieve the same effect.
Class Decorator
let ornaments = function(target){
target.hands='bangles';
target.neck = 'necklace';
target.ear = 'earrings';
};
/* function ornaments is defined as a decorator and placed
above the defined class. It is used to wrap the contents
of the class _Ornaments by wrapping one piece of code on
another. */
@ornaments
class Ornaments{
}
console.log('Ornaments wearing:')
console.log(`${Ornaments.hands}`)
console.log(`${Ornaments.neck}`)
console.log(`${Ornaments.ear}`)Class decorators are applied to the entire class definition. The decorator function is said to be called with a single parameter, which is always the constructor function. In the code above, we use a class decorator to give values to the individual attributes of the class. The class attributes are accessed using a class decorator that is wrapped over an entire class.
Property Descriptor Decorators
// Property Descriptor Decorators.
// Let's define a class CarModel
//Define a decorator function
let Do_not_Overwrite=function(target,key,descriptor)
{
descriptor.writable=false;
return descriptor;
}
class CarModel {
constructor(ModelName)
{
this.Model = ModelName;
}
// define this decorator over getModel()
@Do_not_Overwrite
getModel(){
return this.Model;
}
}
const NewCar = new CarModel('Mercedes');
//The function getModel can be overwritten
NewCar.getModel = function(){
return "dummy string";
}
console.log(`${NewCar.getModel()}`)
/* in this case, if we run code without decorator
the NewCar.getModel will output 'dummy string'.
This is because our function is overwritten. Therefore,
we make use of decorator which will make sure function
is not overwritten and output is 'Mercedes' */
Property Descriptor Decorators are used for many purposes. One of their uses is that they ensure that a function’s results from a class are not overwritten to give inaccurate information. This is exactly what we did in our code above. In the class CarModel, the function getModel() returns a Model of the Car (could be “Mercedes”, “BMW”, “Honda” etc.) However, this function is then overwritten due to the naming convention to always output “dummy string”. Therefore, we define the function Do_not_Overwrite() and use it as a decorator for the class. To ensure the function becomes a ‘read-only function’, write: descriptor.writable=false.
Free Resources