夏天夏 夏天夏
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夏天夏

我也不饶岁月
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript

  • CSS

  • 框架

  • Node

  • 服务

  • 其他

  • 设计模式

    • 前言
    • 创建型-工厂模式
    • 创建型-单例模式
    • 装饰器
      • 场景
      • 函数装饰器
  • web3

  • react

  • 学习笔记
  • 设计模式
夏天夏
2022-12-31
目录

装饰器

# 场景

  • 数据上报
  • 请求公共参数
  • localstorage设置过期时间
  • 路由守卫

# 函数装饰器

用一个函数包装另一个函数,来扩展功能而不改变原始函数

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Point {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }

  @readonly
  get x() {
    return this._x;
  }

  set x(value) {
    this._x = value;
  }
}

const p = new Point(1, 2);
console.log(p.x); // 1
p.x = 3;
console.log(p.x); // 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在上面的例子中,我们定义了一个名为 readonly 的装饰器函数,它将方法的 writable 属性设置为 false。然后,我们使用 @readonly 装饰了 Point 类的 x 方法。这样,我们就可以通过访问 p.x 来读取 x 的值,但是不能通过调用 p.x = 3 来修改它的值。

编辑 (opens new window)
上次更新: 2023/01/06, 13:56:28
创建型-单例模式
入门

← 创建型-单例模式 入门→

最近更新
01
远程办公的个人思考
02-21
02
SEO
01-02
03
NFT的价值
12-27
更多文章>
Theme by Vdoing | Copyright © 2019-2025 夏天夏 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式