Decorator学习（一）----- 基础知识

1、Decorator基础

• 装饰器本质就是编译时执行的函数；
• 特点
  • 不更改原有对象的结构和功能；
  • 为已有对象添加新的功能；
• Decorator类型
  • 类的装饰（所要修饰的目标类将会作为装饰器函数的第一个参数）
    • 含有一个参数（添加静态属性，只能在类上访问，无法在实例上访问，实例访问为undefined）

      <template>
          <div id="decorator">
              decorator学习
          </div>
      </template>
      
      <script>
          @testDecorator
          class Person {
              constructor(name, age) {
                  this.name = 'wxh';
                  this.age = '18'
              }
              eat() {
                  console.log("我会吃~~~~")
              }
          }
          function testDecorator(target) {
              target.job = "I'm a teacher"
          }
          export default {
              name: 'decorator',
              components: {},
              data() {
                  return {};
              },
              computed: {},
              methods: {
      
              },
              mounted() {
                  console.log(Person.job)//I'm a teacher
              }
          };
      </script>
      <style></style>

    • 含有多个参数（添加静态属性，只能在类上访问，无法在实例上访问，实例访问为undefined）

      <template>
          <div id="decorator">
              decorator学习
          </div>
      </template>
      
      <script>
          import { JOB_GRADE } from './index'//是一个常量
          @testDecorator(JOB_GRADE)
          class Person {
              constructor(name, age) {
                  this.name = 'wxh';
                  this.age = '18'
              }
              eat() {
                  console.log("我会吃~~~~")
              }
          }
          function testDecorator(jobGrade) {
              return function (target) {
                  target.job = jobGrade
              }
          }
          export default {
              name: 'decorator',
              components: {},
              data() {
                  return {
      
                  };
              },
              computed: {},
              methods: {
      
              },
              mounted() {
                  console.log(Person.job)//I'm a junior teacher
              }
          };
      </script>
      <style></style>

    • 添加实例属性

      function testDecorator(jobGrade) {
          return function (target) {
              target.prototype.job = jobGrade
          }
      }
      
      console.log(new Person().job)//I'm a junior teacher

    • <template>
          <div id="decorator">
              decorator学习
          </div>
      </template>
      
      <script>
          import { projectHandler } from './index'
          @mixinsMethod(projectHandler)
          class Person {
              constructor(name, age) {
                  this.name = 'wxh';
                  this.age = '18'
              }
              eat() {
                  console.log("我会吃~~~~")
              }
          }
          function mixinsMethod(...params) {
              return function (target) {
                  Object.assign(target.prototype, ...params)
              }
          }
          export default {
              name: 'decorator',
              components: {},
              data() {
                  return {
      
                  };
              },
              computed: {},
              methods: {
        
              },
              mounted() {
                  console.log(new Person().projectHandler())//The subject I teach is mathematics
              }
          };
      </script>
      <style></style>
      
      
      //index.js
      export let projectHandler = {
          projectHandler() {
              console.log("The subject I teach is mathematics")
          }
      }

  • 类的方法的装饰：如果同一个方法有多个装饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。

    <template>
        <div id="decorator">
            decorator学习
        </div>
    </template>
    
    <script>
        class Person {
            constructor(name, age) {
                this.name = 'wxh';
                this.age = '18'
            }
            @testDecorator(1)
            @testDecorator(2)
            eat() {
                console.log("我会吃~~~~")
            }
        }
        function testDecorator(id) {
            console.log(`enter${id}`)
            return (target, name, descriptor) => {
                console.log(`execute${id}`)
                console.log(target)//类的原型对象，Person.prototype
                console.log(name)//修饰的属性名，即类的方法 eat 
                console.log(descriptor)//该属性的描述对象，对象如下
                // {
                //     configurable: true//能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true
                //     enumerable: false//对象属性是否可通过for-in循环，flase为不可循环，默认值为true
                //     value: ƒ eat()
                //     writable: true//对象属性是否可修改,flase为不可修改，默认值为true
                // }
                console.log("结束------")
            }
        }
        export default {
            name: 'decorator',
            components: {},
            data() {
                return {
    
                };
            },
            computed: {},
            methods: {
             
            },
            mounted() {
                console.log(new Person().eat())
            }
        };
    </script>
    <style></style>

    执行结果为：

    enter1
    enter2
    
    execute2
    {constructor: ƒ, eat: ƒ}
    eat
    {value: ƒ, writable: true, enumerable: false, configurable: true}
    结束------
    
    execute1
    {constructor: ƒ, eat: ƒ}
    eat
    {value: ƒ, writable: true, enumerable: false, configurable: true}
    结束------
    
    我会吃~~~~

  • 为什么装饰器不能用于函数：由于存在函数提升，使得装饰器不能用于函数，而类是不会提升的，所以没有这方面的问题；

2、利用装饰器实现自动发布事件

暂时有紧急的任务，稍后继续补充~~

3、遇到的问题

      暂无