ES6 のデコレータに関する簡単な説明

この記事では、ES6 のデコレータについて簡単に説明します。必要な方は参考にしていただければ幸いです。

Decorator

Decorator は主に次の用途に使用されます:

1. Decoration クラス

2. Decoration メソッドまたは属性

装飾クラス

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

装飾メソッドまたは属性

class MyClass {
  @readonly
  method() { }
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

Babel

インストールとコンパイル

インストールできますBabel で試してみてください。Babel でコンパイルされたコードを表示するには、公式 Web サイトで試してみてください。

ただし、ローカル コンパイルを選択することもできます。

npm init

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

新しい .babelrc ファイルを作成します

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ]
}

指定されたファイルをコンパイルします

babel decorator.js --out-file decorator-compiled.js

装飾クラスのコンパイル

コンパイル前:

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

コンパイル後:

var _class;

let MyClass = annotation(_class = class MyClass {}) || _class;

function annotation(target) {
  target.annotated = true;
}

クラスの装飾がわかります。原理は次のとおりです:

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

装飾メソッドのコンパイル

コンパイル前:

class MyClass {
  @unenumerable
  @readonly
  method() { }
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

function unenumerable(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}

コンパイル後:

var _class;

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context ) {
    /**
     * 第一部分
     * 拷贝属性
     */
    var desc = {};
    Object["ke" + "ys"](descriptor).forEach(function(key) {
        desc[key] = descriptor[key];
    });
    desc.enumerable = !!desc.enumerable;
    desc.configurable = !!desc.configurable;

    if ("value" in desc || desc.initializer) {
        desc.writable = true;
    }

    /**
     * 第二部分
     * 应用多个 decorators
     */
    desc = decorators
        .slice()
        .reverse()
        .reduce(function(desc, decorator) {
            return decorator(target, property, desc) || desc;
        }, desc);

    /**
     * 第三部分
     * 设置要 decorators 的属性
     */
    if (context && desc.initializer !== void 0) {
        desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
        desc.initializer = undefined;
    }

    if (desc.initializer === void 0) {
        Object["define" + "Property"](target, property, desc);
        desc = null;
    }

    return desc;
}

let MyClass = ((_class = class MyClass {
    method() {}
}),
_applyDecoratedDescriptor(
    _class.prototype,
    "method",
    [readonly],
    Object.getOwnPropertyDescriptor(_class.prototype, "method"),
    _class.prototype
),
_class);

function readonly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

装飾メソッドのコンパイルされたソース コード分析

Babel が Decorate 用の _applyDecoratedDescriptor 関数を構築したことがわかります。その方法。

Object.getOwnPropertyDescriptor()

パラメータを渡すときは、Object.getOwnPropertyDescriptor() メソッドを使用します:

Object。 () メソッドは、指定されたオブジェクトの独自のプロパティに対応するプロパティ記述子を返します。 (独自のプロパティとは、オブジェクトに直接割り当てられ、プロトタイプ チェーンから参照する必要のないプロパティを指します)

ちなみに、これは ES5 のメソッドであることに注意してください。

例:

const foo = { value: 1 };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//   value: 1,
//   writable: true
//   enumerable: true,
//   configurable: true,
// }

const foo = { get value() { return 1; } };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//   get: /*the getter function*/,
//   set: undefined
//   enumerable: true,
//   configurable: true,
// }

ソース コード分析の最初の部分

_applyDecoratedDescriptor 関数内で、まず Object.getOwnPropertyDescriptor() によって返されるプロパティ記述子オブジェクトを作成します。 :

// 拷贝一份 descriptor
var desc = {};
Object["ke" + "ys"](descriptor).forEach(function(key) {
    desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;

// 如果没有 value 属性或者没有 initializer 属性，表明是 getter 和 setter
if ("value" in desc || desc.initializer) {
    desc.writable = true;
}

それでは、初期化属性とは何でしょうか? Object.getOwnPropertyDescriptor() によって返されるオブジェクトにはこのプロパティがありません。実際、これはデコレータと連携するために Babel のクラスによって生成されるプロパティです。たとえば、次のコードの場合:

class MyClass {
  @readonly
  born = Date.now();
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

var foo = new MyClass();
console.log(foo.born);

Babel になります。次のようにコンパイルされます:

// ...
(_descriptor = _applyDecoratedDescriptor(_class.prototype, "born", [readonly], {
    configurable: true,
    enumerable: true,
    writable: true,
    initializer: function() {
        return Date.now();
    }
}))
// ...

現時点では、_applyDecoratedDescriptor 関数に渡される記述子には、initializer 属性があります。

ソース コード分析の 2 番目の部分

次のステップは、複数のデコレータを適用することです:

/**
 * 第二部分
 * @type {[type]}
 */
desc = decorators
    .slice()
    .reverse()
    .reduce(function(desc, decorator) {
        return decorator(target, property, desc) || desc;
    }, desc);

1 つのメソッドに対して、次のような複数のデコレータが適用されます。

class MyClass {
  @unenumerable
  @readonly
  method() { }
}

Babel は次のようにコンパイルされます:

_applyDecoratedDescriptor(
    _class.prototype,
    "method",
    [unenumerable, readonly],
    Object.getOwnPropertyDescriptor(_class.prototype, "method"),
    _class.prototype
)

ソース コードの 2 番目の部分では、reverse() およびreduce() 操作が実行されます。このことから、同じメソッドに複数の操作があることもわかります。デコレータの場合は、内側から外側へ実行されます。

パート 3 ソース コード分析

/**
 * 第三部分
 * 设置要 decorators 的属性
 */
if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
}

if (desc.initializer === void 0) {
    Object["define" + "Property"](target, property, desc);
    desc = null;
}

return desc;

desc に初期化属性がある場合、class 属性が装飾されると、value の値が次のように設定されることを意味します:

desc.initializer.call(context)

context の値は

_class.prototype です。call(context) が必要な理由も理解しやすいです。装飾メソッドであっても属性であっても、最後に実行されます:

class MyClass {
  @readonly
  value = this.getNum() + 1;

  getNum() {
    return 1;
  }
}

装飾メソッドは基本的に

Object.defineProperty()

を使用して実装されていることがわかります。

Application

1.log

ログ関数をメソッドに追加し、入力パラメータを確認します:

Object["define" + "Property"](target, property, desc);

より完璧な:

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return oldValue.apply(this, args);
  };

  return descriptor;
}

const math = new Math();

// Calling add with [2, 4]
math.add(2, 4);

2.autobind

let log = (type) => {
  return (target, name, descriptor) => {
    const method = descriptor.value;
    descriptor.value =  (...args) => {
      console.info(`(${type}) 正在执行: ${name}(${args}) = ?`);
      let ret;
      try {
        ret = method.apply(target, args);
        console.info(`(${type}) 成功 : ${name}(${args}) => ${ret}`);
      } catch (error) {
        console.error(`(${type}) 失败: ${name}(${args}) => ${error}`);
      }
      return ret;
    }
  }
};

簡単に考えられるシナリオは、React がイベントをバインドするときです:

class Person {
  @autobind
  getPerson() {
      return this;
  }
}

let person = new Person();
let { getPerson } = person;

getPerson() === person;
// true

そのような自動バインド関数を作成しましょう:

class Toggle extends React.Component {

  @autobind
  handleClick() {
      console.log(this)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}

3 .debounce

実行されたメソッドに対して手ぶれ補正処理を実行する必要がある場合があります:

const { defineProperty, getPrototypeOf} = Object;

function bind(fn, context) {
  if (fn.bind) {
    return fn.bind(context);
  } else {
    return function __autobind__() {
      return fn.apply(context, arguments);
    };
  }
}

function createDefaultSetter(key) {
  return function set(newValue) {
    Object.defineProperty(this, key, {
      configurable: true,
      writable: true,
      enumerable: true,
      value: newValue
    });

    return newValue;
  };
}

function autobind(target, key, { value: fn, configurable, enumerable }) {
  if (typeof fn !== 'function') {
    throw new SyntaxError(`@autobind can only be used on functions, not: ${fn}`);
  }

  const { constructor } = target;

  return {
    configurable,
    enumerable,

    get() {

      /**
       * 使用这种方式相当于替换了这个函数，所以当比如
       * Class.prototype.hasOwnProperty(key) 的时候，为了正确返回
       * 所以这里做了 this 的判断
       */
      if (this === target) {
        return fn;
      }

      const boundFn = bind(fn, this);

      defineProperty(this, key, {
        configurable: true,
        writable: true,
        enumerable: false,
        value: boundFn
      });

      return boundFn;
    },
    set: createDefaultSetter(key)
  };
}

実装してみましょう:

class Toggle extends React.Component {

  @debounce(500, true)
  handleClick() {
    console.log('toggle')
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}

4.time

カウントに使用しますメソッド実行時間:

function _debounce(func, wait, immediate) {

    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

function debounce(wait, immediate) {
  return function handleDescriptor(target, key, descriptor) {
    const callback = descriptor.value;

    if (typeof callback !== 'function') {
      throw new SyntaxError('Only functions can be debounced');
    }

    var fn = _debounce(callback, wait, immediate)

    return {
      ...descriptor,
      value() {
        fn()
      }
    };
  }
}

5.mixin

オブジェクト メソッドをクラスに混合するために使用されます:

function time(prefix) {
  let count = 0;
  return function handleDescriptor(target, key, descriptor) {

    const fn = descriptor.value;

    if (prefix == null) {
      prefix = `${target.constructor.name}.${key}`;
    }

    if (typeof fn !== 'function') {
      throw new SyntaxError(`@time can only be used on functions, not: ${fn}`);
    }

    return {
      ...descriptor,
      value() {
        const label = `${prefix}-${count}`;
        count++;
        console.time(label);

        try {
          return fn.apply(this, arguments);
        } finally {
          console.timeEnd(label);
        }
      }
    }
  }
}

mixin の簡単な実装は次のとおりです:

const SingerMixin = {
  sing(sound) {
    alert(sound);
  }
};

const FlyMixin = {
  // All types of property descriptors are supported
  get speed() {},
  fly() {},
  land() {}
};

@mixin(SingerMixin, FlyMixin)
class Bird {
  singMatingCall() {
    this.sing('tweet tweet');
  }
}

var bird = new Bird();
bird.singMatingCall();
// alerts "tweet tweet"

6.redux

実際の開発では、React を Redux ライブラリと組み合わせて使用​​する場合、次のように記述する必要があることがよくあります。

function mixin(...mixins) {
  return target => {
    if (!mixins.length) {
      throw new SyntaxError(`@mixin() class ${target.name} requires at least one mixin as an argument`);
    }

    for (let i = 0, l = mixins.length; i < l; i++) {
      const descs = Object.getOwnPropertyDescriptors(mixins[i]);
      const keys = Object.getOwnPropertyNames(descs);

      for (let j = 0, k = keys.length; j < k; j++) {
        const key = keys[j];

        if (!target.prototype.hasOwnProperty(key)) {
          Object.defineProperty(target.prototype, key, descs[key]);
        }
      }
    }
  };
}

デコレータを使用すると、上記のコードを書き換えることができます。

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

比較的、後者の書き方の方が分かりやすいと思います。

7. 注

上記はすべて、クラスのメソッドを変更するために使用されます。値を取得する方法は次のとおりです。ただし、クラスのインスタンス属性を変更すると、次のようになります。 , Babel のため、value 属性を通じて値を取得することはできません:

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

のように記述できます。

以上がES6 のデコレータに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。