返回顶部
首页 > 资讯 > 前端开发 > VUE >javascript修饰器有什么用
  • 693
分享到

javascript修饰器有什么用

2024-04-02 19:04:59 693人浏览 安东尼
摘要

这篇文章主要讲解了“javascript修饰器有什么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript修饰器有什么用”吧!什么是修饰器修饰

这篇文章主要讲解了“javascript修饰器有什么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript修饰器有什么用”吧!

什么是修饰器

修饰器(Decorator)是ES7的一个提案,它的出现能解决两个问题:

  • 不同类间共享方法

  • 编译期对类和方法的行为进行改变

用法也很简单,就是在类或方法的上面加一个@符,在Vue in typescript中经常用到

javascript修饰器有什么用

以上的两个用处可能不太明白,没关系,我们开始第一个例子

例子1:修饰类

@setProp
class User {}

function setProp(target) {
 target.age = 30
}

console.log(User.age)

这个例子要表达的是对User类使用setProp这个方法进行修饰,用来增加User类中age的属性,setProp方法会接收3个参数,我们现在接触第一个,target代表User类本身。

例子2:修饰类(自定义参数值)

@setProp(20)
class User {}

function setProp(value) {
 return function (target) {
  target.age = value
 }
}

console.log(User.age)

此例和上面功能基本一致,唯一差别在于值是参考修饰函数传过来的

例子2:修饰方法

class User {
 @readonly
 getName() {
  return 'Hello World'
 }
}

// readonly修饰函数,对方法进行只读操作
function readonly(target, name, descriptor) {
 descriptor.writable = false
 return descriptor
}

let u = new User()
// 尝试修改函数,在控制台会报错
u.getName = () => {
 return 'I will override'
}

上例中,我们对User类中的getName方法使用readonly修饰器进行修饰,使得方法不能被修改。第一个参数我们已经知道了,参数name为方法名,也就是readonly,参数descriptor是个啥东西呢,看到这行descriptor.writable = false,我们大家猜的也差不多了,这三个参数对应的就是Object.defineProperty的三个参数,我们来看一下:

javascript修饰器有什么用

我们设置descriptor.writable = false就是让函数不可以被修改,如果我们写成

descriptor.value = 'function (){ console.log('Hello decorator') }'

那么,输出就是Hello World了,而是Hello decorator,是不是已经意识到修饰器的好处了。现在我们来看看实际工作中,我们用到修饰器的例子

实际应用1:日志管理

在用webpack打包时,我们经常需要好多步骤,比如第一步读取package.JSON文件,第二步处理该文件,第三步加载WEBpack.base.js文件,第四步进行打包...为了直观,我们经常在每一步打印一些日志文件,比如这步都干了些什么事,很明显打印日志的操作和业务代码根本就一点关系没有,我们不应该把日志和业务掺和在一起,这样使用修饰器就是避免这个问题,以下为代码:

class Pack {
 @log('读取package.json文件')
 step1() {
  // do something...
  // 没有修饰器之前,我们通常把console.log放到这里写
  // 放到函数里面写会有两个坏处
  //  1.console和业务无关,会破坏函数单一性原则
  //  2.如果要删除所有的console,那我们只能深入到每一个方法中
 }
 @log('合并webpack配置文件')
 step2() {
  // do something...
 }
}

function log(value) {
 return function (target, name, descriptor) {
  // 在这里,我们还可以拿到函数的参数,打印更加详细的信息
  console.log(value)
 }
}

let pack = new Pack()
pack.step1()
pack.step2()

实际应用2:检查登录

这个例子在实际的开发中常用得到,我们一些操作前,必须得判断用户是否登录,比较点赞、结算、发送弹幕...按照之前的写法,我们必须在每一个方法中判断用户的登录情况,然后再进行业务的操作,很显然前置条件和业务又混到了一起,用修饰器,就可以完美的解决这一问题,代码如下:

class User {
 // 获取已登录用户的用户信息
 @checkLogin
 getUserInfo() {
  
  console.log('获取已登录用户的用户信息')
 }
 // 发送消息
 @checkLogin
 sendMsg() {
  console.log('发送消息')
 }
}

// 检查用户是否登录,如果没有登录,就跳转到登录页面
function checkLogin(target, name, descriptor) {
 let method = descriptor.value

 // 模拟判断条件
 let isLogin = true

 descriptor.value = function (...args) {
  if (isLogin) {
   method.apply(this, args)
  } else {
   console.log('没有登录,即将跳转到登录页面...')
  }
 }
}
let u = new User()
u.getUserInfo()
u.sendMsg()

感谢各位的阅读,以上就是“javascript修饰器有什么用”的内容了,经过本文的学习后,相信大家对javascript修饰器有什么用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: javascript修饰器有什么用

本文链接: https://www.lsjlt.com/news/79990.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript修饰器有什么用
    这篇文章主要讲解了“javascript修饰器有什么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript修饰器有什么用”吧!什么是修饰器修饰...
    99+
    2024-04-02
  • java修饰符修饰什么
    Java语言提供了很多修饰符,主要分为以下两类:访问修饰符 (推荐学习:java课程)非访问修饰符修饰符用来修饰类、方法或者变量,通常放在语句的最前端。我们通过下面的例子来说明:public class ClassName { ...
    99+
    2015-03-04
    java入门 java
  • es6 修饰器是干什么用
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。修饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的...
    99+
    2023-05-14
    修饰器 javascript ES6
  • MySQL中WITH ROLLUP修饰符有什么用?
    “WITH ROLLUP”是与 GROUP BY 子句一起使用的修饰符。主要是,它导致摘要输出包含表示更高级别摘要操作的额外行。示例在下面的示例中,WITH ROLLUP 修饰符给出了摘要输出总价位于额外行中。mysql> Selec...
    99+
    2023-10-22
  • es6修饰器的作用是什么
    这篇文章主要讲解了“es6修饰器的作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6修饰器的作用是什么”吧!在es6中,修饰器用来注释或修改类和类的方法,依赖于ES5的“Obje...
    99+
    2023-07-05
  • Kotlin中可见性修饰符有什么用
    这篇文章主要介绍Kotlin中可见性修饰符有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前言在Kotlin中四种可见性修饰符:private、protected、internal、public,如果没有显示指...
    99+
    2023-06-25
  • python中修饰器的作用是什么
    今天就跟大家聊聊有关python中修饰器的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python有哪些常用库python常用的库:1.requesuts;2.scrap...
    99+
    2023-06-14
  • 在vue中有什么按键修饰符
    这篇文章主要介绍了在vue中有什么按键修饰符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 vue中的按键修饰符...
    99+
    2024-04-02
  • Vue的native修饰符有什么作用及怎么使用
    这篇文章主要介绍“Vue的native修饰符有什么作用及怎么使用”,在日常操作中,相信很多人在Vue的native修饰符有什么作用及怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue的native修...
    99+
    2023-07-04
  • JavaScript装饰器模式怎么用
    这篇文章主要讲解了“JavaScript装饰器模式怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript装饰器模式怎么用”吧!装饰器模式想必大家并不陌生:它允许向一个现有的...
    99+
    2023-06-30
  • java修饰符是什么?
    java修饰符用来定义类、方法或者变量,通常放在语句的最前端。(推荐:java视频教程)Java语言提供了很多修饰符,主要分为以下两类:访问修饰符非访问修饰符Java语言定义了public、protected、private、abstrac...
    99+
    2019-07-25
    java 修饰符
  • Python装饰器有什么功能
    这篇文章主要介绍“Python装饰器有什么功能”,在日常操作中,相信很多人在Python装饰器有什么功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python装饰器有什么功能”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-20
  • JavaScript正则表达式的修饰符有哪些
    本篇内容主要讲解“JavaScript正则表达式的修饰符有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript正则表达式的修饰符有哪些”吧! ...
    99+
    2024-04-02
  • 详解JavaScript私有类字段和TypeScript私有修饰符
    目录JavaScript私有类字段和隐私需求一个 JavaScript 私有类字段的例子TypeScript 中的 private 修饰符TypeScript 中的私有类字段Java...
    99+
    2024-04-02
  • C#中Static修饰的作用是什么
    这篇文章将为大家详细讲解有关C#中Static修饰的作用是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.类的静态成员:classA  {  p...
    99+
    2023-06-18
  • JavaScript中什么是装饰者模式
    本篇文章为大家展示了JavaScript中什么是装饰者模式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,j...
    99+
    2023-06-14
  • Vue修饰符有哪些及怎么使用
    这篇文章主要介绍了Vue修饰符有哪些及怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue修饰符有哪些及怎么使用文章都会有所收获,下面我们一起来看看吧。1.lazyla...
    99+
    2024-04-02
  • Vue.js中.native修饰符的作用是什么
    本篇文章为大家展示了Vue.js中.native修饰符的作用是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。.native修饰符官方对.native修饰符的解释...
    99+
    2024-04-02
  • C#中new修饰符的作用是什么
    C#中new修饰符的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。C# new修饰符是起什么作用?◆C# new修饰符与 new 操作符是两个概念;◆C# new...
    99+
    2023-06-17
  • C#中abstract修饰符的作用是什么
    C#中abstract修饰符的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。C# abstract修饰符是什么意思?C# abstract修饰符可以用于类、方法、...
    99+
    2023-06-17
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作