前端装饰器

原创已于 2022-11-16 15:22:52 修改 · 814 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-11-16 15:22:03 首次发布

本文介绍了JavaScript中的装饰器，一种用于在类和类属性间共享和扩展功能的机制。装饰器分为类装饰器、属性装饰器和函数装饰器，它们分别用于类、类属性和函数的增强。通过示例展示了如何使用装饰器添加额外的行为，如设置属性为只读。装饰器使代码更加简洁、可重用，并降低了复杂性，便于维护。

今天和公司同事去做核酸的路上闲聊，便聊到了刚才他面试问新员工的一个问题：装饰器。我对它算是比较陌生的。之前也没有接触过，在我从它的字面意思的理解上认为：“它可能是一层对方法的装饰，就和Vue中的路由钩子差不多，在跳转路由前走一遍，做一些判断的逻辑操作之类的”。然后同事给我劈里啪啦一顿讲，我也听的懵懵的。回去后仔细看了，简单的介绍下装饰器。

简介

在pythod之类的语言中装饰器很早就出现了，而对JavaScript中的装饰器的支持仍处于第 2 阶段提案中，我们需要使用babel将代码转为ES5或者ES6才可以使用。
当我们需要在多个不同的类之间共享或者扩展一些方法或行为的时候，代码会变得错综复杂，极其不优雅，这也就是装饰器被提出的一个很重要的原因。

Javascript 中的装饰器

总的来说，我们可以在 JavaScript 中分出 3 种类型的装饰器：

类装饰器—— 一次应用于整个类。

类成员装饰器(属性装饰器)——应用于类的成员

函数装饰器——用函数来包装函数。

装饰器的具体表现

类装饰器只接收一个参数类本身

function add(target){
	 target.prototype.age = 22
}
@add(50)
class person {
    name = ''
    constructor(name) {
        this.name = name
    }
}
const stu = new person('Tom')
console.log(stu.name)	// Tom
console.log(stu.age)	// 22

属性装饰器接收三个参数
1、target - 成员所在的类。
2、name - 类成员的名称。
3、descriptor - 成员描述符。

function readonly(target, name , descriptor){
    descriptor.writable = false
}
class person {
    @readonly
    sub(){
        console.log('我是sub')
    }
}
const stu = new person('dw')
stu.sub = ()=>{
    console.log('ads')
}
stu.sub()	// TypeError: Cannot assign to read only property 'sub' of object '#<person>'

函数装饰器
函数是不能使用直接使用装饰器，因为函数存在函数提升的特性。但是我们可以使用高阶函数来实现装饰器 的功能。

function multiply(x, y) {
    console.log('total : ' + (x * y));
}
function logDecorator(logger) {
    return function () {
        return logger.apply(this, arguments);
    }
}
const wrapperFunction = logDecorator(multiply);
wrapperFunction(10,10)

总结

将装饰器引入 JavaScript 的主要目的是在 JavaScript 类和类属性之间共享功能。
但是，这并不是装饰器带来的唯一优势。
装饰器允许开发人员编写干净且可重用的代码。开发人员可以使用装饰器轻松地将功能的增强与代的码特性分开。
除此之外，装饰器语法非常简单，允许在不增加代码复杂性的情况下向类和属性添加新功能。
这使得代码更易于维护和调试。