decorator 装饰器

曾经终败给现在 2022-12-01 05:27 118阅读 0赞

**许多面向对象都有decorator(装饰器)函数，比如python中也可以用decorator函数来强化代码，decorator相当于一个高阶函数，接收一个函数，返回一个被装饰后的函数。**

注: javascript中也有`decorator`相关的提案，只是目前node以及各浏览器中均不支持。只能通过安装babel插件来转换代码，插件名叫这个：`transform-decorators-legacy`。也有在线试用\]([https://babeljs.io/repl/][https_babeljs.io_repl])，安装好`transform-decorators-legacy`之后，就能看到转义后的代码了：

npm i -D @babel/plugin-proposal--decorators

可以再下载一个plugin配置类里面属性的写法

npm i -D @babel/plugin-proposal-class-properties

在babelrc中配置插件：

options: {
       plugins: ['@babel/plugin-proposal-class-properties']
    }

### **2.1 使用decorator的前期配置** ###

### **1.vscode里面去除装饰器报错的方法** ###

在vscode里打开设置=>用户设置里面加入(tips:打开设置后也可以直接点击右上角的'\{\}'进行用户设置)

"javascript.implicitProjectConfig.experimentalDecorators": true

就可以了。

### **2.搭建一个简单的webpack 来使用装饰器** ###

由于目前浏览器和node暂时不支持装饰器,所以我们可以配置一个webpack来使用装饰器

全局安装：

cnpm install webpack webpack-cli webpack-dev-server -g

启动配置 创建一个webpack.dev.js

var path = require('path')
    
    module.exports = {
        mode: "development",
        entry: {
            main: "./test.js"
        },
        output: {
            path: path.resolve(__dirname, "./dist"),
            filename: "test.js"
        },
        module: {
            rules: [ //webpack 4.X写法
                {
                    test: /.js$/,
                    use: ['babel-loader']
                }
            ]
        }
    }

下载依赖(webpack4.x 方法 )

npm install -D babel-loader @babel/core @babel/preset-env

配置.babelrc

{
        "presets": [
            "@babel/preset-env"
        ],
        "plugins": [
            [
                "@babel/plugin-proposal-decorators",
                {
                    "legacy": true
                }
            ],
        ]
    }

### **创建好webpack的目录结构是这样的** ###

![format_png][]

### **package.json的配置** ###

{
      "name": "decorator",
      "version": "1.0.0",
      "description": "",
      "main": "test.js",
      "scripts": {
        "build": "webpack --config=webpack.dev.js",
        "start": "node ./dist/bound.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "@babel/core": "^7.4.4",
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/plugin-proposal-decorators": "^7.4.4",
        "@babel/preset-env": "^7.4.4",
        "babel-loader": "^8.0.5",
        "babel-plugin-transform-decorators-legacy": "^1.3.5",
        "babel-preset-env": "^1.7.0",
        "core-decorators": "^0.20.0"
      }
    }

### **2.2 开始使用decorator** ###

### **1.类的修饰** ###

许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为。目前，有一个[提案][Link 1]将这项功能，引入了 ECMAScript。 下面我们采用一个钢铁侠的例子来展开

![format_png 1][]

![format_png 2][]

@transform
    class IronMan {
      // ...
    }
    
    function transform(target) {
      target.weapon = 'laser'
    }
    
    console.log(IronMan.weapon) // laser

上面代码中，@transform就是一个修饰器。它修改了`IronMan`这个类的行为，为它加上了武器属性`weapon`。`transform`函数的参数`target`是`IronMan`类本身。

### **2.方法的修饰** ###

修饰器不仅可以修饰类，还可以修饰类的属性。

class Person {
      @readonly
      name() { return `${this.first} ${this.last}` }
    }

上面代码中，修饰器`readonly`用来修饰“类”的`name`方法。

修饰器函数`readonly`一共可以接受三个参数。

function readonly(target, name, descriptor){
      // descriptor对象原来的值如下
      // {
      //   value: specifiedFunction,
      //   enumerable: false,
      //   configurable: true,
      //   writable: true
      // };
      descriptor.writable = false;
      return descriptor;
    }
    Person.prototype.name="韩梅梅"
    console.log(Person.prototype.name)//fn 修饰的是类的原型
    
    readonly(Person.prototype, 'name', descriptor);
    // 类似于
    Object.defineProperty(Person.prototype, 'name', descriptor);

修饰器第一个参数是类的原型对象，上例是`Person.prototype`，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，所以只能去修饰原型（这不同于类的修饰，那种情况时`target`参数指的是类本身）；第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。

### **4.装饰器不能用于修饰函数** ###

原本作者设计的时候 是可以使用这种方式的 比如修饰一个函数这么写

@RunOnce
    function expensiveOperation() {
        return 1 + 1;
    }
    //语法糖之后的效果是这样的
    var expensiveOperation = RunOnce(function expensiveOperation() {
      return 1 + 1;
    });

这意味着装饰器可以用于任何任务,但是作者认为这样可能有点复杂 并且还有一个潜在的问题 装饰器和跟随变量一块提升 使得装饰器语法函数过早执行而导致因为位置的原因产生的一些错误 比如:

var readOnly = require("some-decorator");
    
    // 是否提升求值?
    // 如果是这样的话 `readOnly` 那么就是未定义 
    @readOnly
    function foo() {
    
    }

总而言之,作者不希望产生这样的复杂性,所以去除了修饰函数,详情可以参考这篇作者参与讨论的[帖子][Link 2]

### **5.应用** ###

至于decorator的应用场景在哪里？应该大部分AOP的场景都可以用，例如日志系统。 这里就手动来实现一个简单的日志系统。

### **6.core-decorators.js** ###

[core-decorators.js][]是一个第三方模块，提供了几个常见的修饰器，通过它可以更好地理解修饰器。

**（1）@readonly**

`readonly`修饰器使得属性或方法不可写。

import { readonly } from 'core-decorators';
    
    class Meal {
      @readonly
        entree (){
            console.log(111)
        };
    }
    
    var dinner = new Meal();
    dinner.entree = 'salmon';
    // Cannot assign to read only property 'entree' of [object Object]

**（2）@override**

`override`修饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。

import { override } from 'core-decorators';
    
    class Parent {
      speak(first, second) {}
    }
    
    class Child extends Parent {
      @override
      speak() {}
      // SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
    }
    
    // or
    
    class Child extends Parent {
      @override
      speaks() {}
      // SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
      //
      //   Did you mean "speak"?
    }

**（3）@deprecate (别名@deprecated)**

`deprecate`或`deprecated`修饰器在控制台显示一条警告，表示该方法将废除。

import { deprecate } from 'core-decorators';
    
    class Person {
      @deprecate
      facepalm() {}
    
      @deprecate('We stopped facepalming')
      facepalmHard() {}
    
      @deprecate('We stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' })
      facepalmHarder() {}
    }
    
    let person = new Person();
    
    person.facepalm();
    // DEPRECATION Person#facepalm: This function will be removed in future versions.
    
    person.facepalmHard();
    // DEPRECATION Person#facepalmHard: We stopped facepalming
    
    person.facepalmHarder();
    // DEPRECATION Person#facepalmHarder: We stopped facepalming
    //
    //     See http://knowyourmeme.com/memes/facepalm for more details.
    //

[https_babeljs.io_repl]: https://link.zhihu.com/?target=https%3A//babeljs.io/repl/
[format_png]: /images/20221123/403ebf55b458465f9d14de8c7e341728.png
[Link 1]: https://link.zhihu.com/?target=https%3A//github.com/tc39/proposal-decorators
[format_png 1]: /images/20221123/758f37682cf64627a4f72ce5f3f1cf21.png
[format_png 2]: /images/20221123/0c0296c72478438e8beda291e675aa7c.png
[Link 2]: https://link.zhihu.com/?target=https%3A//github.com/wycats/javascript-decorators/issues/4
[core-decorators.js]: https://link.zhihu.com/?target=https%3A//github.com/jayphelps/core-decorators.js