ES7 Decorator 与函数变换

发表于 5年以前 | 总阅读数：1538 次

ES7 Decorator 与函数变换

在ES7的众多新特性中，我个人最喜欢的特性除了广为人知的 async/await 外，就数Yehuda Katz提出的decorator。

decorator 是什么？

decorator 的概念来源于 Python 的decorator，也类似于 Java 的 Annotation。它实际上是一个 wrapper ，作用于一个函数或者对象，对目标函数或对象进行一系列变换，然后返回一个新的函数或对象。

函数变换与过程抽象

我们知道，JavaScript的函数可以作为参数和返回值，因此我们可以通过函数变换来实现过程抽象，举一个例子：

function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

如上面的代码所示，我们现在有3个简单的函数，它们分别实现加法、乘法、数组的连接操作。那么现在，如果我们需要的不仅仅是两个操作数的加法、乘法和数组操作，而是支持多个数进行操作，我们该怎么办呢？

第一种办法，我们自然是对三个函数分别进行改写：

function add_many(...args){
        return args.reduce((a,b) => a+b));
    }

    function mul_many(...args){
        return args.reduce((a,b) => a*b));
    }

    function concat(arr1, arr2){
        return args.reduce((a,b) => a.concat(b));
    }

好在三个函数本身并不复杂，因此我们修改起来不费多少力气。但是，显然，我们有更"聪明"的做法：

function reducer(target){
        return (...args) => args.reduce(target);
    }

    let add_many = reducer(add);
    let mul_many = reducer(mul);
    let concat_many = reducer(concat);

如上面代码所示，我们实现一个 reducer 函数，它可以对任意两个参数计算的函数进行变换，返回一个支持多参数的函数，这样我们对需要变换的函数进行变换就可以了。

我们再看一个例子：

function multicast(target){
      return function(list, ...rest) {
        if(Array.isArray(list)){
          return list.map(item => target.apply(this, [item].concat(rest)));
        }else{
          let item = list;
          return target.apply(this, [item].concat(rest));
        }
      }
    }

    class Collection {
      constructor(){
        this.items = [];
      }
      append(item){
        this.items.push(item);
        return this.items.slice(-1)[0];
      }
    }

    var c = new Collection();
    c.append = multicast(c.append);
    c.append([1,2,3]);
    console.log(c.items[1]); //2

在这个例子里，我们实现一个叫做 multicast 的函数变换，它可以将一个函数的第一个参数允许对数组进行批量操作，经过变换的函数，如果第一个参数传入数组，那么它将这个参数中的元素依次迭代执行目标函数，最后将结果作为一个数组返回。

这个变换是比较有用处的，因为它可以用来批量操作DOM元素：

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

function multicast(target){
      return function(list, ...rest) {
        if(Array.isArray(list)){
          return list.map(item => target.apply(this, [item].concat(rest)));
        }else{
          let item = list;
          return target.apply(this, [item].concat(rest));
        }
      }
    }

    function setColor(el, color){
        return el.style.color = color;
    }

    var setColorMany = multicast(setColor);

    var els = document.querySelectorAll("ul>li:nth-child(2n+1)");
    console.log(els);
    setColorMany(Array.from(els), "red");

使用 decorator 来实现函数变换

ES7 decorator 是一种语法糖，它可以用更优雅的方式实现同样的函数变换。

我们把上面的例子稍微改一下：

function multicast(target, key, descriptor){
      let func = target[key];
      descriptor.value = function(list, ...rest) {
        if(Array.isArray(list)){
          return list.map(item => func.apply(this, [item].concat(rest)));
        }else{
          let item = list;
          return func.apply(this, [item].concat(rest));
        }
      }
      return descriptor;
    }

    class Collection {
      constructor(){
        this.items = [];
      }

      @multicast
      append(item){
        this.items.push(item);
        return this.items.slice(-1)[0];    
      }
    }

    var c = new Collection();
    c.append([1,2,3]);
    console.log(c.items[1]);

上面的代码在 babel stage-1 使用 decorators 插件的情况下可以正确编译和执行。我们看到有了 decorator，我们不用再手工调用函数变换的 wrapper，可以直接用 @wrapper 的方式来修饰一个对象方法了。

一个 decorator 是一个函数，它有三个参数，第一个是被 decorator 修饰的对象，第二个是属性名，第三个参数是 Object.defineProperty 的 descriptor，有了这些参数，我们就可以在定义时，对它进行各种"修饰"。再看一个例子：

function deprecate(target, key, descriptor){
        console.log("[Function " + key + "] has been deprecated.");
        return descriptor;
    }

    class MyClass {
        @deprecate
        old_method(){
            console.log("I\"m deprecated"); 
        }
    }

    var a = new MyClass();
    a.old_method();

decorator 可以带参数，方法是在 decorator 函数定义的时候嵌套一层：

function delay(ms){
      return function(target, key, descriptor){
        let func = target[key];
        descriptor.value = function(...args){
          return setTimeout(function(){
            func.apply(target, args);
          }, ms);
        }
      }
    }

    class MyClass {
      @deprecate
      old_method(){
        console.log("I\"m deprecated"); 
      }
      @delay(3000)
      new_method(){
        console.log("I\"m called after 3000ms");
      }
    }

    var a = new MyClass();
    a.new_method();

可以用多个 decorator 修饰一个方法：

function spread(target, key, descriptor){
      let func = target[key];

      target[key] = function(...args){
        return func.call(this, args);
      }

      return target[key];
    }

    function multicast(target, key, descriptor){
      let func = target[key];

      target[key] = function(list, ...rest) {
        if(Array.isArray(list)){
          return list.map(item => func.apply(this, [item].concat(rest)));
        }else{
          let item = list;
          return func.apply(this, [item].concat(rest));
        }
      }
      return target[key];
    }

    class Collection {
      constructor(){
        this.items = [];
      }

      @spread
      @multicast
      append(item){
        this.items.push(item);
        return this.items.slice(-1)[0];    
      }
    }

    var c = new Collection();
    c.append(1,2,3);
    console.log(c.items[1]);

decorator 与函数变换的比较

与一般的函数变换相比，decorator 有更优雅的语法，但是 decorator 目前不能针对一般的函数进行变换，只能针对类的方法，这一块不如普通函数变换灵活。

函数变换: promisify

let request = require("request");

    function promisify(func){
      return function(...args){    
        return new Promise((resolve, reject) => {
          args.push(function(err, ...args){
            if(!err){
              resolve(args);
            }else{
              reject(err);
            }
          });
          func.apply(this, args);
        });
      }
    }

    var getData = promisify(request);

    getData("http://www.baidu.com").then(function(data){
      console.log(data);
    });

使用 decorator

"use strict"

    let request = require("request");

    function promisify(target, key, descriptor){
      var func = target[key];

      target[key] = function(...args){    
        return new Promise((resolve, reject) => {
          args.push(function(err, ...args){
            if(!err){
              resolve(args);
            }else{
              reject(arr);
            }
          });
          func.apply(this, args);
        });
      }

      return target[key];
    }

    class Site{
      constructor(url){
        this.url = url;
      }
      @promisify
      getData(callback){
        request(this.url, callback);
      }
    }

    var baidu = new Site("http://www.baidu.com");

    baidu.getData().then(function(data){
      console.log(data);
    });

decorator 可以操作 Object.defineProperty 的 descriptor，因此可以用来做一些函数变换范围之外的事情：

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

    class Foo{
      @readonly
      bar(){
        console.log(1);
      }
    }

    var foo = new Foo();
    foo.bar();
    foo.bar = 2;    //Error
    foo.bar();

decorator 的其他用途

decorator 不仅能修饰函数，还可以修饰类，我们对上面的代码进行修改：

"use strict"

    let request = require("request");

    function promisify(target, key, descriptor){
      var func = target[key];

      target[key] = function(...args){    
        return new Promise((resolve, reject) => {
          args.push(function(err, ...args){
            if(!err){
              resolve(args);
            }else{
              reject(arr);
            }
          });
          func.apply(this, args);
        });
      }

      return target[key];
    }

    function url(url){
      return function(Site){
        Site.prototype.url = url;
        return Site;
      }
    }

    class Site{
      @promisify
      getData(callback){
        request(this.url, callback);
      }
    }

    @url("http://www.baidu.com")
    class Baidu extends Site{}

    var baidu = new Baidu();
    console.log(baidu.url);

    baidu.getData().then(function(data){
      console.log(data);
    });

从函数变换到 decorator

从前面的比较中我们可以看出函数变换与 decorator 可以相互转换，我们写一个一般的方法来做转换：

function wrapperToDecorate(wrapper){
      if(wrapper.length <= 1){
        return function(target, key, descriptor){
          target[key] = wrapper.call(this, target[key]);
          return target[key];
        }
      }else{
        return function(...args){
          return function(target, key, descriptor){
            target[key] = wrapper.apply(this, args.concat([target[key]]));
            return target[key];
          }
        }
      }
    }

这样我们就可以将函数变换转成 decorator：

"use strict"

    let request = require("request");

    function wrapperToDecorate(wrapper){
      if(wrapper.length <= 1){
        return function(target, key, descriptor){
          target[key] = wrapper.call(this, target[key]);
          return target[key];
        }
      }else{
        return function(...args){
          return function(target, key, descriptor){
            target[key] = wrapper.apply(this, args.concat([target[key]]));
            return target[key];
          }
        }
      }
    }

    function promisify(func){
      return function(...args){    
        return new Promise((resolve, reject) => {
          args.push(function(err, ...args){
            if(!err){
              resolve(args);
            }else{
              reject(arr);
            }
          });
          func.apply(this, args);
        });
      }
    }

    promisify = wrapperToDecorator(promisify);

    function url(url){
      return function(Site){
        Site.prototype.url = url;
        return Site;
      }
    }

    class Site{
      @promisify
      getData(callback){
        request(this.url, callback);
      }
    }

    @url("http://www.baidu.com")
    class Baidu extends Site{}

    var baidu = new Baidu();
    console.log(baidu.url);

    baidu.getData().then(function(data){
      console.log(data);
    });

总结

decorator 和 函数变换 都拥有不修改函数代码，调整和改变函数性质的能力。 decorator 的语法更加优雅，且能作用于 class 和 descriptor，而函数变换不仅仅对类有作用，还可以作用域普通函数，它们两者之间也可以通过 wrapperToDecorator 方法进行自由的转换。

我写了一个基础库，core-wrappers，包含了常用的函数变换，以及将这些变换转换成decorator的方法，这些方法不仅仅是存在于理论上，大部分方法在实际项目中，也是非常有用的。当年QWrap的核心也是基于函数变换，因此能将简单的函数变换为像jQuery一样十分灵活的API。

总之，两者都是JavaScript作为动态语言，在过程抽象和函数式编程方面的能力的体现，用好它们，可以写出简单易懂且功能强大的代码来。