js装饰器@decorator学习笔记

Posted 2022-07-12 胖鹅68

文章目录

• 一、注解的基本用法
• 二、扩展类

一、注解的基本用法

/**
 * 注解执行是有顺序的， 顺序如下
 * 1. 先执行带参数的注解
 * 2. 再按照 出现顺序 执行 属性或 方法的注解
 * 3. 最后按照 栈（先书写后执行） 类的注解
 */
@fn
@fn3
@fn2(10) // 这个可以理解为执行了 fn2(10)的函数
class MyClass 
  @noEnumerable name = 'huangbiao' // name 无法被遍历到
  @readOnly message = 'hello' // message 无法被修改


function fn(target) 
  console.log('fn')
  target.foo = 'bar'


function fn2(value) 
  console.log('fn2')
  return function (target) 
    target.count = value
  


function fn3(target) 
  console.log('fn3', target)
  target.prototype.foo = 'baz'


function readOnly(target, name, descriptor) 
  console.log('fn4')
  console.log('target', target) // 目标类的.prototype
  console.log('name', name) // 被修饰的类成员名称
  /**
  configurable: true  // 默认值为true 当设置为false 则理解为该属性不可删除不可修改
  enumerable: true  // 默认值为true 当设置为false 则理解我改属性只读
  initializer: ƒ ()
  writable: true // 默认值为true 当设置为false 则理解为无法枚举 遍历属性时无法将该属性取出
   */
  console.log('descriptor', descriptor) // 被修饰类成员的描述对象
  descriptor.writable = false


function noEnumerable(target, name, descriptor) 
  console.log('fn5')
  console.log('target', target) // 目标类的.prototype
  console.log('name', name) // 被修饰的类成员名称
  /**
  configurable: true  // 默认值为true 当设置为false 则理解为该属性不可删除不可修改
  enumerable: true  // 默认值为true 当设置为false 则理解我改属性只读
  initializer: ƒ ()
  writable: true // 默认值为true 当设置为false 则理解为无法枚举 遍历属性时无法将该属性取出
   */
  console.log('descriptor', descriptor) // 被修饰类成员的描述对象
  descriptor.enumerable = false


console.log('MyClass.foo =>', MyClass.foo) // => bar
console.log('MyClass.count =>', MyClass.count) // => bar
console.log('new MyClass().foo => ', new MyClass().foo) // => baz

const obj = new MyClass()
// obj.message = 'world'
// console.log('obj.message => ', obj.message)

for (var key in obj) 
   console.log('key, obj[key]', key, obj[key])

二、扩展类

function mixins(...list)
  return function (target)
    Object.assign(target.prototype, ...list)
  


const Foo = 
  foo () 
    console.log('foo func')
  


@mixins(Foo)
class MyClass 

let obj = new MyClass()
obj.foo()

高性能云服务器 精品线路独享带宽，毫秒延迟，年中盛惠 1 折起