当class properties遇上decorator

本篇共3个章节。

前2个章节介绍class中两种方式定义方法的不同、decorator如何作用于class的方法。

最后1个章节通过一个demo介绍了如何实现一个兼容class普通方法和class属性方法的装饰器，以及如何保留装饰器装饰的箭头函数式中this为类实例的特性。

一、class中的函数

在React中的函数中固定this指向组件实例是一个常见的需求，通常有以下三种写法：

1.在constructor中使用bind指定this:

this.handlePress = this.handlePress.bind(this)
复制代码

2.使用autobind的装饰器:

@autobind
  handlePress(){}
复制代码

3.使用class properties与arrow function

handlePress = () => {}
复制代码

这里有两种为类声明方法的方式，第一种如1、2在类中直接声明方法，第二种为将方法声明为类的一个属性（’=‘标识）。

我们都知道class即function，让我们定义一个简单的类，观察babel编译后的结果，看看这两种方式声明的方法有何不同。

class A {
    sayHello() {
    }
    sayWorld = function() {
    }
  }
复制代码

编译后

var A = function () {
      function A() {
          _classCallCheck(this, A);
  
          this.sayWorld = function () {};
      }
  
      _createClass(A, [{
          key: "sayHello",
          value: function sayHello() {}
      }]);
  
      return A;
  }();
复制代码

编译后的代码中sayHello和sayWorld是通过不同方式关联到A上的。sayWorld的定义发生在构造函数执行期间，即类实例的创建时。而sayHello是通过_createClass方法关联到A上的。

来看看_createClass做了什么：

var _createClass = function () {
    function defineProperties(target, props) { 
      for (var i = 0; i < props.length; i++) { 
        // 创建一个数据属性，并将其定义在target对象上
        var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; 
        descriptor.configurable = true; 
        if ("value" in descriptor) descriptor.writable = true; 
        Object.defineProperty(target, descriptor.key, descriptor); 
      } 
    } 
    return function (Constructor, protoProps, staticProps) { 
      if (protoProps) defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) defineProperties(Constructor, staticProps); 
      return Constructor;
    }; 
  }();
复制代码

_createClass中创建了一个如下的数据属性，使用Object.defineProperty定义在A.prototype上。

{
  enumerable: false,
  configurable: true,
  writable: true,
  value: function sayHello() {}
}
复制代码

可见sayHello方法是定义在A.prototype上的方法，会被众多A的实例所共享；而sayWorld则是每个A实例独有的方法（每次创建实例都会新建）。

得出结论：

1、普通的类方法实际归属于class.prototype，该类的众多实例将通过原型链共享该方法。

2、属性方式定义的类方法归属于class的实例，同名方法在类的不同实例中并不相同。

让我们对A做一些修改，重新编译。

class A {
    sayHello() {
      console.log('hello', this);
    }
    sayWorld = function() {
      console.log('world', this);
    }
    sayName = () => {
      console.log('name', this);
    }
  }
复制代码

编译后

var A = function () {
    function A() {
      var _this = this;
  
      _classCallCheck(this, A);
  
      this.sayWorld = function () {
        console.log('world', this);
      };
  
      this.sayName = function () {
        console.log('name', _this);
      };
    }
  
    _createClass(A, [{
      key: 'sayHello',
      value: function sayHello() {
        console.log('hello', this);
      }
    }]);
  
    return A;
  }();
复制代码

我们都知道箭头函数中this的指向为其声明时当前作用域的this，所以sayName中的this在编译过程中被替换为_this（构造函数执行时的this，即类实例本身），这就是前面固定方法this指向实例的第三种方法"使用class properties与arrow function"生效的原因。

二、decorator

装饰器(decorator)是一个函数，用于改造类与类的方法。篇幅原因我们这里只介绍作用于类方法的装饰器。一个简单的函数装饰器构造如下：

function decoratorA(target, name, descriptor) {
  // 未做任何修改
}
复制代码

• target为class.prototype。

• name即方法名称。

• descriptor有两种，数据属性和访问器属性。两种属性包含了6种特性，enumerable和configurable为共有的2种特性，writable和value为数据属性独有，而getter和setter为访问器属性独有。

看一个简单的例子：

function decoratorA() {}
  function decoratorB() {}
  class A {
    @decoratorA
    @decoratorB
    sayHello() {
    }
  }
复制代码

编译后

function decoratorA() {}
  function decoratorB() {}
  var A = (_class = function () {
    function A() {
      _classCallCheck(this, A);
    }
  
    _createClass(A, [{
      key: "sayHello",
      value: function sayHello() {}
    }]);
  
    return A;
  }(), (_applyDecoratedDescriptor(_class.prototype, "sayHello", [decoratorA, decoratorB], Object.getOwnPropertyDescriptor(_class.prototype, "sayHello"), _class.prototype)), _class);
复制代码

与之前一样sayHello定义为A.prototype的属性，而后执行_applyDecoratedDescriptor应用装饰器decoratorA和decoratorB。

来看看_applyDecoratedDescriptor做了什么：

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;
    }
    // 以上为初始化一个数据属性（initializer不属于上文提到的6种属性特性，第三节详述其作用）
    
    // 本例中此处desc为{ enumerable: false, configurable: true, writable: true, value: function sayHello() {} }
  
    // 此处的reverse表明装饰器将按照距离sayHello由近及远的顺序执行，即先应用decoratorB再应用decoratorA
    desc = decorators.slice().reverse().reduce(function (desc, decorator) {
      // 装饰器执行，可在装饰器内部按需修改desc
      return decorator(target, property, desc) || desc;
    }, desc);
    // 本例中无initializer不执行此段代码
    if (context && desc.initializer !== void 0) {
      desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
      desc.initializer = undefined;
    }
  
    if (desc.initializer === void 0) {
      // 将装饰器处理后的desc定义到target即A.prototype上
      Object['define' + 'Property'](target, property, desc);
      desc = null;
    }
    // 返回null
    return desc;
  }
复制代码

通过上述代码分析我们认识到：

1、装饰器的执行发生在类创建后，此时并无实例

2、依照距离函数由近及远执行

3、通过修改被装饰方法的属性特性，可以实现我们所需的功能（例如autobind-decorator实现绑定this）。

三、当class properties遇到decorator

decorator是es7纳入规范的js特性，而class properties目前是stage3阶段（截止2018.11.23）的提案，还没有正式纳入ECMAScript。

一个属性方法的特点是其创建在实例生成阶段（构造函数中），而装饰器的执行是在类创建后（实例生成前），这里就发生了一个概念上的小冲突，装饰器执行时属性方法似乎还没创建。那装饰器是如何装饰一个属性方法的呢，让我们到代码中找出答案。

function decoratorA() {}
  class A {
    @decoratorA
    sayName = () => {
      console.log(this);
    }
  }
复制代码

编译后

function _initDefineProp(target, property, descriptor, context) {
    if (!descriptor) return;
    Object.defineProperty(target, property, {
      enumerable: descriptor.enumerable,
      configurable: descriptor.configurable,
      writable: descriptor.writable,
      value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
    });
  }

  function decoratorA() {}
  var A = (_class = function A() {
    _classCallCheck(this, A);
  
    _initDefineProp(this, "sayName", _descriptor, this);
  }, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "sayName", [decoratorA], {
    enumerable: true,
    initializer: function initializer() {
      var _this = this;
  
      return function () {
        console.log(_this);
      };
    }
  })), _class);
复制代码

简单的描述：

1、通过initializer来记录并标识类的属性方法

2、_applyDecoratedDescriptor创建返回了一个属性的描述对象_descriptor

3、在构造函数中通过_initDefineProp将_descriptor定义到实例this上（属性方法依然归属于实例，而不是class.prototype）

从_initDefineProp逆推，有2个关键点需要注意：

1、_applyDecoratedDescriptor需返回一个包含initializer的descriptor，以确保属性的value是通过initializer调用初始化

2、装饰器在处理descriptor时，返回的descriptor需包含initializer，而不是数据属性或访问器属性格式的descriptor.

实现一个兼容普通类函数和类属性函数的装饰器（保留箭头函数的this绑定）

需求：检查登录状态的装饰器，当装饰器修饰的方法调用时，检查登录状态。若已登录则执行该方法，若未登录，则执行一个指定方法提示需登录。

// 登录状态
  let logined = true;
  function checkLoginStatus() {
    return new Promise((resolve) => {
      resolve(logined);
      // 每次返回登录状态后对登录状态取反
      logined = !logined;
    });
  }
  // 提示需要登录
  function notice(target, tag) {
    console.log(tag, this === target, 'Need Login!');
  }
  // 检查登录状态的装饰器
  function checkLogin(notLoginCallback) {
    return function decorator(target, name, descriptor) {
      // 方法为类属性方法
      if (descriptor.initializer) {
        const replaceInitializer = function replaceInitializer() {
          const that = this;
          // 此处传入了指向类实例的this
          const fn = descriptor.initializer.call(that);
          return function replaceFn(...args) {
            checkLoginStatus().then((login) => {
              if (login) {
                return fn.call(this, ...args);
              }
              return notLoginCallback.call(this, ...args);
            });
          };
        };
        return {
          enumerable: true,
          configurable: true,
          writable: true,
          initializer: replaceInitializer,
        };
      }
      // 普通的类方法
      const originFn = descriptor.value;
      const replaceFn = function replaceFn(...args) {
        const that = this;
        checkLoginStatus().then((login) => {
          if (login) {
            return originFn.call(that, ...args);
          }
          return notLoginCallback.call(that, ...args);
        });
      };
      return {
        enumerable: true,
        configurable: true,
        writable: true,
        value: replaceFn,
      };
    }
  }
  
  class A {
    constructor() {
      this.printA2 = this.printA2.bind(this);
    }
    printA1(target, tag) {
      console.log(tag, this === target);
    }
    @checkLogin(notice)
    printA2(target, tag) {
      console.log(tag, this === target);
    }
    printB1 = function(target, tag) {
      console.log(tag, this === target);
    }
    @checkLogin(notice)
    printB2 = function(target, tag) {
      console.log(tag, this === target);
    }
    printC1 = (target, tag) => {
      console.log(tag, this === target);
    }
    @checkLogin(notice)
    printC2 = (target, tag) => {
      console.log(tag, this === target);
    }
  }
  
  const a = new A();
  a.printA1(a, 1);        // 1 true
  (0, a.printA1)(a, 2);   // 2 false
  a.printA2(a, 3);        // 3 true 
  (0, a.printA2)(a, 4);   // 4 true 'Need Login!'
  a.printB1(a, 5);        // 5 true
  (0, a.printB1)(a, 6);   // 6 false
  a.printB2(a, 7);        // 7 true
  (0, a.printB2)(a, 8);   // 8 false 'Need Login!'
  a.printC1(a, 9);        // 9 true
  (0, a.printC1)(a, 10);  // 10 true
  a.printC2(a, 11);       // 11 true
  (0, a.printC2)(a, 12);  // 12 true 'Need Login!'
复制代码