ES6 -- 修饰器

decorator是ES7引入的功能,它是一个函数,用来修改类甚至于是方法的行为。

类的修饰

一个简单的栗子:

@testable

class MyTestableClass {

  // ...

}

function testable(target) {

      target.isTestable = true;

}

MyTestableClass.isTestable // true

上面的例子中,@testable就是一个修饰器,它修改了它下面的这个MyTestableClass类的行为:给它加上了一个静态属性isTestable。

注意,修饰器对类的行为的改变,是在代码编译的时候就发生的,而不是在代码运行时。这就意味着,修饰器能够在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数。


如果觉得一个参数不够用,可以在修饰器外面再封装一层函数

eg:

function testable(isTestable) {

  return function(target) {

    target.isTestable = isTestable;

  }

}

@testable(true)

class MyTestableClass { }

MyTestableClass.isTestable // true

@testable(false)

class MyClass {}

MyClass.isTestable // false

在这个例子中,修饰器可以接受参数,以控制修饰器的行为。


前面的例子都是为类添加一个静态属性,当然,我们也可以通过为目标类的prototype添加属性来添加实例属性。

function testable(target) {

  target.prototype.isTestable = true;

}

@testable

class MyTestableClass {}

let obj = new MyTestableClass();

obj.isTestable // true

这样通过prototype添加的属性,就可以在实例上调用。


下面是另一个例子,在这个栗子中,包含export和import代码,并且还加入了闭包的思想。

// mixins.js

export function mixins(...list) {

  return function (target) {

    Object.assign(target.prototype, ...list)

  }

}

// main.js

import { mixins } from './mixins'

const Foo = {

  foo() { console.log('foo') }

};

@mixins(Foo)

class MyClass {}

let obj = new MyClass();

obj.foo() // 'foo'

这就是上一篇文档中的mixin:将Foo类的方法添加到了MyClass的实例上面。

方法的修饰

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

例子:

class Person {

  @readonly

  name() { return `${this.first} ${this.last}` }

}

此时,修饰器函数一共可以接受三个参数:第一个参数是要修饰的目标对象,第二个参数是要修饰的属性名,第三个参数是该属性的描述对象。

function readonly(target, name, descriptor){

  // descriptor对象原来的值如下

  // {

      //  value: specifiedFunction,

      //  enumerable: false,

      //  configurable: true,

      //  writable: true

  // };

  descriptor.writable = false;

  return descriptor;

}

修饰器会修改属性的描述对象,然后被修改的描述对象再用来定义属性。

这是另一个例子:

class Person {

  @nonenumerable

  get kidCount() { return this.children.length; }

}

function nonenumerable(target, name, descriptor) {

  descriptor.enumerable = false;

  return descriptor;

}

修饰器还有注释的作用:

@testable

class Person {

  @readonly

  @nonenumerable

  name() { return `${this.first} ${this.last}` }

}

我们可以直接从修饰器的名称看出,Person类是可测试的,而name方法是只读和不可枚举的。

如果同一个方法有多个修饰器,会先从外到内进入,然后从内向外执行。

function dec(id){

    console.log('evaluated', id);

    return (target, property, descriptor) => console.log('executed', id);

}

class Example {

    @dec(1)

    @dec(2)

    method(){}

}

// evaluated 1

// evaluated 2

// executed 2

// executed 1

修饰器不能用于函数

修饰器只能用于“类”和类的方法,不能用于函数,因为存在函数提升。

如果真的需要修饰函数,可以采用高阶函数的形式直接 执行。

function doSomething(name) {

  console.log('Hello, ' + name);

}

function loggingDecorator(wrapped) {

  return function() {

    console.log('Starting');

    const result = wrapped.apply(this, arguments);

    console.log('Finished');

    return result;

  }

}

const wrapped = loggingDecorator(doSomething);

core-decorators.js

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

Mixin

利用修饰器,可以实现Mixin模式。

Mixin模式,就是对象继承的一种替代方案,中文译为“混入”(mix in),意为在一个对象之中混入另外一个对象的方法。

例子:

const Foo = {

  foo() { console.log('foo') }

};

class MyClass {}

Object.assign(MyClass.prototype, Foo);

let obj = new MyClass();

obj.foo() // 'foo'

这是一个混入的简单实现,下面我们用修饰器来实现它:

export function mixins(...list) {

  return function (target) {

    Object.assign(target.prototype, ...list);

  };

}

import { mixins } from './mixins';

const Foo = {

  foo() { console.log('foo') }

};

@mixins(Foo)

class MyClass {}

let obj = new MyClass();

obj.foo() // "foo"

---------------------

原文转自:https://blog.csdn.net/u014328357/article/details/7360679

版权声明:本文为博主原创文章,转载请附上博文链接!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 写在前面,因为function存在变量提升,所以修饰器是只能修饰类,而不能修饰函数 修饰器是一个函数,用来修改类的...
    ITtian阅读 1,900评论 0 3
  • 修饰器@ 只能用于类 和 类的方法 类的修饰器 修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时 方法的...
    lmmy123阅读 1,437评论 0 0
  • 类的修饰 修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经...
    呼呼哥阅读 1,458评论 0 0
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 3,107评论 1 2
  • 代码:
    leomei91阅读 331评论 0 0