专栏首页前端小菜鸟ES6装饰器Decorator的实现原理
原创

ES6装饰器Decorator的实现原理

NOTE Decorators are an experimental feature that may change in future releases.

装饰器是类的一种附加功能,支持注释或修改类和类成员。目前处于ES6提案的第二阶段(Stage 2),可以借助babel等工具使用该实验性的特性。

Decorator

使用@ 操作符将装饰器添加到类或者类的方法作为修饰。

// 1.修饰类
function runBoolFun(target) {
    target.runBool= true;
    return target;
}

@runBoolFun
class Person{}
console.log(Person.runBool)

// 2.修饰属性
function readonly(target, name, descriptor) {
    discriptor.writable = false;
    return discriptor;
}

class Person{
    @readonly
    run() {
        console.log("跑的不是很快!");
    }
}

let person = new Person();
person.say = run() {
    console.log("跑的很快!");
}

person.run() // 跑的不是很快!

JavaScript没有类的概念,我们的class字符其实是JavaScript实现的一种语法糖,定义Person的类:

class Person{
    say() {
        return `Hello!`
    }
}

这个简单的Person类只包含一个say()方法,我们实现一个定义类的语法糖的核心原理:

function Person() {}
Person.defineProperty(Person.prototype, 'say', {
    value: function() {return `Hello!`},
    enumerable: false,
    configurable: true,
    writable: true
})

这是我们熟悉的ES5的用法,我们重新复习一下Object.defineProperty的方法。

Object.defineProperty(obj, prop, descriptor)

接受三个不同的参数:

  • obj:要定义属性的对象
  • prop:要定义或者修改的属性或者符号
  • descriptor:定于或者修改描述符

我们可以通过修改或者定义描述符修改对象属性的值,当我们使用装饰器修饰对象属性的过程,其实是执行下面的一段过程:

let descriptor = {
    value: function() {
        console.log("hello");
    },
    enumerable: false,
    configurable: true,
    writable: true
};
descriptor = readonly(Person.prototype, "say", descriptor) || descriptor;
Object.defineProperty(Person.prototype, "say", descriptor);

我们知道装饰器也是ES6提供的一个语法糖,当我们使用装饰器修饰类的时候,装饰器runBoolFun是一个纯粹的函数,类本身也是一个函数,target指向的是这个函数(类),执行过程如下:

Person = runBoolFun(function Person() { })

参考

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6语法中类(class)的实现原理

    JavaScript语言不同于其他的类C语言,没有提供类的概念,但是可以提供类似的语法糖来实现JS面向对象的编程范式,本质上不是严格意义上的类

    伯爵
  • 理解JavaScript立即执行函数

    立即执行函数通常包含两种使用格式,具体使用那一种风格可以根据个人习惯和团队规范选择:

    伯爵
  • 自己实现一个JavaScript Promise类

    Promise对象用于表示一个异步操作的最终状态以及操作的值。Promise本质上是一个绑定了回调的对象,区别于将回调传入函数内部。

    伯爵
  • 《Monkey Java》课程4.1之面向对象基础2

    GitOPEN
  • 过滤器模式过滤器模式

    过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻...

    用户2436820
  • Java设计模式学习笔记—过滤器模式

    文章最后“Java设计模式笔记示例代码整合”为本系列代码整合,所有代码均为个人手打并运行测试,不定期更新。本节内容位于其Filter包(package)中。

    汐楓
  • Java单体应用 - 架构模式 - 03.设计模式-08.过滤器模式

    原文地址:http://www.work100.net/training/monolithic-architecture-design-patterns-fil...

    光束云
  • 《Drools7.0.0.Final规则引擎教程》第4章 4.4 约束(Pattern的一部分)

    4.4.3 约束(Pattern的一部分) 前面我们已经介绍了条件约束在Pattern中位置了,那么什么是条件约束呢?简单来说就是一个返回true或者false...

    用户1161110
  • 设计模式学习 - 单例模式

    两种模式都需要先私有化构造函数以禁止直接new操作来创建实例,不然就失去了单例的意义。

    许杨淼淼
  • C++-面向对象(二)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java

扫码关注云+社区

领取腾讯云代金券