JS decorator @decorator learning notes

One 、 Basic usage of annotations

/**
 *  Annotation execution is sequential ,  Order as follows 
 * 1.  First execute the annotation with parameters 
 * 2.  Again according to   The order of appearance   perform   Attribute or   Comment on method 
 * 3.  Finally, according to   Stack （ Write first and then execute ）  Class annotation 
 */
@fn
@fn3
@fn2(10) //  This can be understood as execution  fn2(10) Function of 
class MyClass {
    
  @noEnumerable name = 'huangbiao' // name  Cannot be traversed to 
  @readOnly message = 'hello' // message  Cannot be modified 
}

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) //  Target class .prototype
  console.log('name', name) //  The name of the decorated class member 
  /**
  configurable: true  //  The default value is true  When set to false  It is understood that this attribute cannot be deleted or modified 
  enumerable: true  //  The default value is true  When set to false  Then understand that I change the attribute to read-only 
  initializer: ƒ ()
  writable: true //  The default value is true  When set to false  It is understood that enumeration cannot be performed   When traversing a property, the property cannot be taken out 
   */
  console.log('descriptor', descriptor) //  The description object of the decorated class member 
  descriptor.writable = false
}

function noEnumerable(target, name, descriptor) {
    
  console.log('fn5')
  console.log('target', target) //  Target class .prototype
  console.log('name', name) //  The name of the decorated class member 
  /**
  configurable: true  //  The default value is true  When set to false  It is understood that this attribute cannot be deleted or modified 
  enumerable: true  //  The default value is true  When set to false  Then understand that I change the attribute to read-only 
  initializer: ƒ ()
  writable: true //  The default value is true  When set to false  It is understood that enumeration cannot be performed   When traversing a property, the property cannot be taken out 
   */
  console.log('descriptor', descriptor) //  The description object of the decorated class member 
  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])
}

Two 、 The extension class

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()