ES6系列之装饰器

# 一、简介

装饰器依赖于 ES5 的 Object.defineProperty 方法

# 1.1 Object.defineProperty

• Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象
• 该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性（for...in 或 Object.keys 方法）， 这些值可以被改变，也可以被删除。这种方法允许这些额外的细节从默认值改变。默认情况下，使用 Object.defineProperty() 添加的属性值是不可变的

Object.defineProperty(obj, prop, descriptor)

• obj：要在其上定义属性的对象。
• prop：要定义或修改的属性的名称。
• descriptor：将被定义或修改的属性描述符。
• 返回值：被传递给函数的对象。

在ES6中，由于 Symbol类型 的特殊性，用 Symbol类型 的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义 key为 Symbol 的属性的方法之一

descriptor属性描述符

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符

• 数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。
• 存取描述符是由 getter-setter 函数对描述的属性。

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false

enumerable

• enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。
• 当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

# 二、Babel

安装编译

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

新建 .babelrc 文件

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ]
}

• 一、简介
  • 1.1 Object.defineProperty
• 二、Babel
• 三、用法
  • 3.1 类的装饰
  • 3.2 方法的装饰
  • 3.3 函数方法的装饰
• 四、使用场景
  • 4.1 装饰器有注释的作用
  • 4.2 React 的 connect
  • 4.3 loading
  • 4.4 log
  • 4.5 autobind
  • 4.6 debounce
  • 4.7 time
  • 4.8 mixin

← ES6系列之SymbolES6系列之Reflect →