在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]); 在这个例子里，我们实现一个叫做 multicast 的函数变换，它可以将一个函数的第一个参数允许对数组进行批量操作，经过变换的函数，如果第一个参数传入数组，那么它将这个参数中的元素依次迭代执行目标函数，最后将结果作为一个数组返回。
这个变换是比较有用处的，因为它可以用来批量操作DOM元素：
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(li:nth-child(2n+1)");
console.log(els);
setColorMany(Array.from(els), );使用 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( + key + );
return descriptor;
}
class MyClass {
@deprecate
old_method(){
console.log();
}
}
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();
}
@delay(3000)
new_method(){
console.log();
}
}
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();
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);
});
}
}
var getData = promisify(request);
getData().then(function(data){
console.log(data);
}); 使用 decorator
let request = require();
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();
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;
foo.bar();decorator 的其他用途
decorator 不仅能修饰函数，还可以修饰类，我们对上面的代码进行修改：
let request = require();
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()
class Baidu extends Site{}
var baidu = new Baidu();
console.log(baidu.url);
baidu.getData().then(function(data){
console.log(data);
});从函数变换到 decorator
从前面的比较中我们可以看出函数变换与 decorator 可以相互转换