一文读懂ES7中的JavaScript修饰器
什么是修饰器
JavaScript修饰器是一种表达式,用于修改类的行为。修饰器通常是一个函数,接收一个类作为参数,然后返回一个包含被修饰后的类的新类。修饰器可以用来修改类的属性、方法或者整个类的行为。
在ES7中,修饰器已经成为了官方规范的一部分,被纳入了JS标准中。可以通过在类、属性或方法前面添加@修饰器名称
的方式来使用修饰器。
修饰器实现
下面是一个简单的修饰器实现:
function log(target) {
const original = target.prototype.someMethod;
target.prototype.someMethod = function (...args) {
console.log("before someMethod");
const result = original.apply(this, args);
console.log("after someMethod");
return result;
}
return target;
}
@log
class MyClass {
someMethod() {
console.log("run someMethod");
}
}
在上面的代码中,修饰器log
接收一个类作为参数,在类中添加了一个before someMethod
和after someMethod
的日志打印。最终,通过将这个修饰器添加到MyClass
类上,MyClass
类的someMethod
方法通过调用log
修饰器被修改了。
修饰器示例
1. 限制类的属性的值
function range(value) {
return function (target, key) {
let _value = value;
Object.defineProperty(target, key, {
get() {
return _value;
},
set(value) {
if (value < 0) {
_value = 0;
}else if (value > 100) {
_value = 100;
}else {
_value = value;
}
}
});
return target;
}
}
@range(50)
class Student {
@range(90)
score;
constructor(name, score) {
this.name = name;
this.score = score;
}
getName() {
console.log(this.name);
}
getScore() {
console.log(this.score);
}
}
const student = new Student("小明", 80);
console.log(student.score); // 80
student.score = -10;
console.log(student.score); // 0
student.score = 200;
console.log(student.score); // 100
上面的代码中,我们定义了一个名为range
的修饰器。这个修饰器可以用来限制类的属性的值必须在某个范围内。可以通过在类的属性前添加@range
来使用这个修饰器。
在Student
类中,我们为score
属性后使用了@range(90)
修饰器,使得score
属性必须在0到90之间。在Student
类的构造函数中,我们创建了一个名为student
的实例,并传入了一个成绩为80的学生。
最后,我们分别打印了student
对象的成绩属性,并尝试将成绩设置为负数和超出90的数值,检验了@range
修饰器的作用。
2. 定义路由与中间件
const routes = {};
function route(path) {
return function (target, key, descriptor) {
routes[path] = routes[path] || {};
routes[path].method = "get";
routes[path][routes[path].method] = descriptor.value;
}
}
function middleware(m) {
return function (target, key, descriptor) {
const original = descriptor.value;
descriptor.value = function () {
const result = m();
if (result) {
return original.apply(this, arguments);
}
return "error";
}
}
}
class HomeController {
@route("/")
@middleware(() => true)
static index() {
return "Hello, World!";
}
@route("/about")
@middleware(() => false)
static about() {
return "About us";
}
}
console.log(routes); // { '/': { method: 'get', value: [Function: index] }, '/about': { method: 'get', value: [Function: about] } }
console.log(HomeController.index()); // Hello, World!
console.log(HomeController.about()); // error
上面的代码中,我们定义了route
和middleware
两个修饰器。其中,route
用于定义路由,middleware
用于定义中间件。
在HomeController
中,我们分别使用了route
和middleware
两个修饰器,定义了两个路由:/
和/about
。/
路由的中间件返回true
,所以可以正常访问,而/about
的中间件返回false
,所以页面输出了一个错误信息。
总结
修饰器是一项非常有用的技术,可以用于修改类的行为或者定义类的属性、方法。在ES7中正式被纳入了JS标准中,并且越来越多的框架和库也开始使用修饰器来简化代码的编写。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:一文读懂ES7中的javascript修饰器 - Python技术站