es7的decorator修饰器

装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法。

decorator就是给类添加或修改类的变量与方法的。

装饰器是一种函数,写成@ + 函数名。它可以放在类和类方法的定义前面。

@frozen class Foo {
@configurable(false)
@enumerable(true)
method() {} @throttle(500)
expensiveMethod() {}
}

上面代码一共使用了四个装饰器,一个用在类本身,另外三个用在类方法。它们不仅增加了代码的可读性,清晰地表达了意图,而且提供一种方便的手段,增加或修改类的功能。

1.修改类

@addType
class human{}
function addType(target){
target.age=27;
target.name=hyh;
target.sex=male;
target.hight=178;
console.log('此对象被修改了')
}
console.log(new human())

上面代码中,@addType就是一个装饰器。它修改了human这个类的行为,为它加上了静态属性age name sex hight等等。addType函数的参数target是human类本身。

2.修改类的方法

class Dabao {
@setAttr
cxh(){
return true
}
}
function setAttr(targt, name, decorator) {
decorator.writable = false
return
} var dabao = new Dabao;
console.log(dabao.cxh)
dabao.cxh = () => {
return false
}
console.log(dabao.cxh)

3. 装饰器可接受多个传参,第一个参数为修饰target  ,如果觉得一个参数不够用,可以在装饰器外面再封装一层函数。

装饰器testable可以接受参数,这就等于可以修改装饰器的行为。

function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
} @testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true @testable(false)
class MyClass {}
MyClass.isTestable // false

上面代码中,装饰器函数testable是在目标类的prototype对象上添加属性,因此就可以在实例上调用。

下面是另外一个例子。

// 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'

实际开发中,React 与 Redux 库结合使用时,常常需要写成下面这样。

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

有了装饰器,就可以改写上面的代码。

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

相对来说,后一种写法看上去更容易理解。

4.装饰器不能用于装饰函数

5.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'

上面代码之中,对象Foo有一个foo方法,通过Object.assign方法,可以将foo方法“混入”MyClass类,导致MyClass的实例obj对象都具有foo方法。这就是“混入”模式的一个简单实现。

下面,我们部署一个通用脚本mixins.js,将 Mixin 写成一个装饰器。

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"

js基石之---es7的decorator修饰器的更多相关文章

  1. 19.Decorator修饰器

    Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...

  2. mobx中使用class语法或decorator修饰器时报错

    之前课程中老师用的babel的版本比较低,我在学习时安装的babel版本较高,因此每当使用class语法或decorator修饰器时都会出现一些报错的情况! ❌ ERROR in ./src/inde ...

  3. ES6(Decorator(修饰器))

    Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...

  4. 21.Decorator修饰器

    1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持

  5. es6 Decorator修饰器

    1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...

  6. python decorator 修饰器

    decorator 就是给函数加一层皮,好用! 1 from time import ctime 2 3 def deco(func): 4 def wrappedFunc(*args, **kwar ...

  7. ES6 Decorator 修饰器

    目的:  修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd      plugins: [&quo ...

  8. mobx学习笔记03——mobx基础语法(decorator修饰器)

    在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...

  9. ES2017中的修饰器Decorator

    前面的话 修饰器(Decorator)是一个函数,用来修改类的行为.本文将详细介绍ES2017中的修饰器Decorator 概述 ES2017 引入了这项功能,目前 Babel 转码器已经支持Deco ...

随机推荐

  1. 【Jenkins】参数化引用

    我们在Jenkins里设置了参数如下 1. Jenkins中引用 shell引用  $env windows bat引用 %env% 在git等源码管理时,调用参数的格式${env} 2. jmete ...

  2. vue2.x学习笔记(二十二)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令 简介 除了核心功能默认内置的指令([v-mode]和[v-show]等),v ...

  3. vue2.x学习笔记(一)

    使用vue开发项目已经过了一段时间了,对其中的很多东西还是一知半解,于是想要系统学习一下.主要内容是参照官方中文网站https://cn.vuejs.org/v2/guide/,然后加上一些自己的理解 ...

  4. Fiddler抓取抖音视频

    目录 工具 Fiddler配置 手机端配置 工具 Android 或 ios手机均可 Fiddler 下载地址:https://www.telerik.com/fiddler Windows 操作系统 ...

  5. Java 网络编程 -- 基于TCP实现文件上传

    Java TCP 操作基本流程 一.创建服务器 1.指定端口, 使用serverSocket创建服务器 2.阻塞式连接 accept 3.操作:输入流 输出流 4.释放资源 二.创建客户端 1.使用S ...

  6. mysql5.7免安装版配置

    解压之后,新建一个my.ini 内容是: [mysql] # 设置mysql客户端默认字符集 default-character-set = utf8 [mysqld] #安装目录 basedir = ...

  7. phpcms模块安装

    工作中需要用到 phpcms开源框架,借鉴了   http://www.cnblogs.com/benpaodelulu/p/6874201.html这个地址,搞定的 ,非常实用 如果有用到的朋友们可 ...

  8. [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版)

    [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版) 目录 [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码 ...

  9. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  10. innobackupex 出现Unrecognized character \x01; marked by

    centos 7.2 mysql 5.7.16 innobackupex version 2.4.6 [root@Devops-mysql-150-115 sh]# innobackupex --de ...