js基石之---es7的decorator修饰器
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修饰器的更多相关文章
- 19.Decorator修饰器
Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...
- mobx中使用class语法或decorator修饰器时报错
之前课程中老师用的babel的版本比较低,我在学习时安装的babel版本较高,因此每当使用class语法或decorator修饰器时都会出现一些报错的情况! ❌ ERROR in ./src/inde ...
- ES6(Decorator(修饰器))
Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...
- 21.Decorator修饰器
1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持
- es6 Decorator修饰器
1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...
- python decorator 修饰器
decorator 就是给函数加一层皮,好用! 1 from time import ctime 2 3 def deco(func): 4 def wrappedFunc(*args, **kwar ...
- ES6 Decorator 修饰器
目的: 修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd plugins: [&quo ...
- mobx学习笔记03——mobx基础语法(decorator修饰器)
在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...
- ES2017中的修饰器Decorator
前面的话 修饰器(Decorator)是一个函数,用来修改类的行为.本文将详细介绍ES2017中的修饰器Decorator 概述 ES2017 引入了这项功能,目前 Babel 转码器已经支持Deco ...
随机推荐
- 【Jenkins】参数化引用
我们在Jenkins里设置了参数如下 1. Jenkins中引用 shell引用 $env windows bat引用 %env% 在git等源码管理时,调用参数的格式${env} 2. jmete ...
- vue2.x学习笔记(二十二)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令 简介 除了核心功能默认内置的指令([v-mode]和[v-show]等),v ...
- vue2.x学习笔记(一)
使用vue开发项目已经过了一段时间了,对其中的很多东西还是一知半解,于是想要系统学习一下.主要内容是参照官方中文网站https://cn.vuejs.org/v2/guide/,然后加上一些自己的理解 ...
- Fiddler抓取抖音视频
目录 工具 Fiddler配置 手机端配置 工具 Android 或 ios手机均可 Fiddler 下载地址:https://www.telerik.com/fiddler Windows 操作系统 ...
- Java 网络编程 -- 基于TCP实现文件上传
Java TCP 操作基本流程 一.创建服务器 1.指定端口, 使用serverSocket创建服务器 2.阻塞式连接 accept 3.操作:输入流 输出流 4.释放资源 二.创建客户端 1.使用S ...
- mysql5.7免安装版配置
解压之后,新建一个my.ini 内容是: [mysql] # 设置mysql客户端默认字符集 default-character-set = utf8 [mysqld] #安装目录 basedir = ...
- phpcms模块安装
工作中需要用到 phpcms开源框架,借鉴了 http://www.cnblogs.com/benpaodelulu/p/6874201.html这个地址,搞定的 ,非常实用 如果有用到的朋友们可 ...
- [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版)
[源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版) 目录 [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码 ...
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 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 ...