什么是装饰器

萌小乖
228 阅读2分钟

Decorator 是 ES7 的一个新语法，正如其“装饰器”的叫法所表达的，他可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等

兼容性怎么样

遗憾的告诉你， 不怎么样：)

目前ES中Decorator还处于提案阶段,各大浏览器和node,均未公开支持这一特性 需要借用babel的一个插件babel-plugin-transform-decorators才可以使用，详细配置请看readme文档

有哪些装饰器 - 类装饰器


 // 以此可以获取实例化的时候此属性的默认值 let v = descriptor.initializer && descriptor.initializer.call(this); 

 // 返回一个新的描述对象，或者直接修改 descriptor 也可以 return { enumerable: true, configurable: true, get: function() { return v; }, set: function(c) { v = c; } } } } ``` 

 - 方法装饰器 ```javascript class A { @decoractor getParams() { ... } }
  • 属性装饰器
class A { @decoractor num = 123; }
  • 参数装饰器
function getValues(@decoractor value) { ... }

为什么使用装饰器

  • 很适合用来做基础库的语法糖，用来简化上层代码 - 对重复工作量大的业务进行修饰，方便维护且代码简洁 ### 装饰器的原理是什么

  • Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

  • obj：要在其上定义属性的对象。 - prop：要定义或修改的属性的名称。

  • descriptor：将被定义或修改的属性描述符

  • 属性描述符:

    • configurable（是否可配置）

    • enumerable（是否可枚举）

    • value（属性值）

    • writable（是否可写）

    • get（读取属性值是被调用）

    • set（访问属性值是被调用）

  • 看了例子还不明白，就点我哦

var obj = {}; 

Object.defineProperty(obj, "name", { value: "Fundebug", writable: true, enumerable: true, configurable: true });

console.log(Object.getOwnPropertyDescriptor(obj, "name")); 

// 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

使用装饰器的一些细节

  • 多个装饰器可以同时应用到一个声明上,例如mobx的@inject和@observer...

  • 装饰器是在代码编译的过程中执行的，而不是代码执行的过程中执行的

  • 装饰器的执行顺序是从里到外(代码案例1)

  • for...of&& for..in （参考资料）

怎么结合项目理解装饰器

由于篇幅以及时间有限，装饰器的作用以及一些用法远远不止于此，所以如果各位道友想要在以后的项目中对装饰器的使用如鱼得水，可能就需要各位自己私下多多研究原理，以及阅读一些相关的源码，这是本猿给的些许意见，欢迎补充

参考资料： - [阮一峰的ES6入门-decorator]

(es6.ruanyifeng.com/#docs/decor…) - typescript装饰器 - core-decorators - github代码库

avatar
文章
阅读
粉丝