zoukankan      html  css  js  c++  java
  • 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")
              }
          }
          View Code
      • 类的方法的装饰:如果同一个方法有多个装饰器,会像剥洋葱一样,先从外到内进入,然后由内向外执行。
        <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>
        View Code

        执行结果为:

        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、遇到的问题

          暂无

  • 相关阅读:
    《移动开发者周刊》第十一期
    2012安卓巴士开发者沙龙成都站大家抓紧报名
    23岁那年你正处在哪个状态?现在呢?
    《老罗Android开发视频教程》老罗来交国庆的答卷了
    程序员,你的一千万在哪里?
    《老罗Android开发视频教程》更新
    2012全球开发者大会项目投资一对一相亲会
    windows远程桌面
    [LeetCode] NQueens
    [LeetCode] Pascal's Triangle II
  • 原文地址:https://www.cnblogs.com/wxh0929/p/13918135.html
Copyright © 2011-2022 走看看