ECMAScript Decorators---装饰器

Decorators是什么

Decorators可以改变类方法和类实例字段的属性和行为，使我们可以灵活地使用更简单的语法动态实现这些内容，是非侵入式的。---举例，你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能

应用场景

Decorators的经典的应用是AOP编程，比如“日志系统”，日志系统的作用是记录系统的行为操作，它在不影响原有系统的功能的基础上增加记录环节
更加抽象的理解，可以理解为给数据流做一层filter，因此 AOP 的典型应用包括安全检查、缓存、调试、持久化等等。

原理

Decorators的本质是利用了ES5的Object.defineProperty属性，这三个参数其实是和Object.defineProperty参数一致的，因此不能更改
object 必需。要在其上添加或修改属性的对象这可能是一个本机JavaScript对象（即用户定义的对象或内置对象）或 DOM 对象。
propertyname必需。一个包含属性名称的字符串
descriptor 必需。属性描述符。它可以针对数据属性或访问器属性。
举例说明

var myObj = {myPropOne: 1,myPropTwo: 2
};
// modify property descriptor
Object.defineProperty( myObj, 'myPropOne', {writable: false, // 是否允许该属性值更改enumerable: false, // 是否允许key被枚举，话句话说for in 或者Object.keys() 不会输出keyconfigurable: false// 目标属性是否可以被删除或是否可以再次修改特性
} );

应用举例

类方法 @readonly

class User {constructor( firstname, lastName ) {this.firstname = firstname;this.lastName = lastName;}@readonlygetFullName() {return this.firstname   ' '   this.lastName;}
}
// create instance
let user = new User( 'John', 'Doe' );
console.log( user.getFullName() );// 某天我不小心重写了这个方法
User.prototype.getFullName = function() {return 'HACKED!';
}// 输出 HACKED! 与预期不符，怎么避免此类情况发生// 方法1 这是最好的解决方案么？修饰器登场
Object.defineProperty( User.prototype, 'getFullName', {writable: false
});// 将此方法添加到修饰方法getFullName上
function readonly( target, property, descriptor ) {descriptor.writable = false;return descriptor;
}

类方法 @log日志打印

function log( logMessage ) {// return decorator functionreturn function ( target, property, descriptor ) {// save original value, which is method (function)let originalMethod = descriptor.value;// replace method implementationdescriptor.value = function( ...args ) {console.log( '[LOG]', logMessage );// here, call original method// `this` points to the instancereturn originalMethod.call( this, ...args );};return descriptor;}
}
class User {constructor( firstname, lastName ) {this.firstname = firstname;this.lastName = lastName;}@log('calling getFullName method on User class')getFullName() {return this.firstname   ' '   this.lastName;}
}
var user = new User( 'John', 'Doe' );
console.log( user.getFullName() );

类的属性大小写转换

// 解释：descriptor.initializer函数由Babel内部使用来创建对象属性的属性描述符的值
function toCase( CASE = 'lower' ) {return function ( target, name, descriptor ) {let initValue = descriptor.initializer();descriptor.initializer = function(){return ( CASE == 'lower' ) ? initValue.toLowerCase() : initValue.toUpperCase();}return descriptor;}
}
class User {@toCase( 'upper' )firstName = 'default_first_name';lastName = 'default_last_name';constructor( firstName, lastName ) {if( firstName ) this.firstName = firstName;if( lastName ) this.lastName = lastName;}getFullName() {return this.firstName   ' '   this.lastName;}
}
console.log( new User() );

类装饰器

function withLoginStatus( UserRef ) {return class extends UserRef {constructor( ...args ) {super( ...args );this.isLoggedIn = false;}setLoggedIn() {this.isLoggedIn = true;}}
}
@withLoginStatus
class User {constructor( firstName, lastName ) {this.firstName = firstName;this.lastName = lastName;}
}
let user = new User( 'John', 'Doe' );
console.log( 'Before ===> ', user );
// set logged in
user.setLoggedIn();
console.log( 'After ===> ', user );

babel 装换

在线转换链接(如无法打开网页需翻墙)
构建babel装换

1、创建项目文件
2、命令行进入该项目目录 npm init
3、npm install babel-core babel-plugin-transform-decorators
4、安装 npm install babel-plugin-transform-decorators-legacy --save-dev
5、.babelrc添加
{  "plugins": [    "transform-decorators-legacy"]
}

参考链接

ECMAScript Decorators---装饰器
ES7 Decorator 装饰者模式
阮一峰---修饰器

ECMAScript Decorators---装饰器相关推荐

decorators 参数_Django中decorators装饰器的使用
1.CBV实现的登录视图 classLoginView(View):defget(self, request):"""处理GET请求""" ...
Decorators TypeScript 装饰器
Decorators 装饰器(Decorator)用来增强 JavaScript 类(class)的功能,许多面向对象的语言都有这种语法,目前有一个提案将其引入了 ECMAScript. 装饰器是一种 ...
了解TypeScript装饰器
一.创建demo文件 typeScript是一门基于JavaScript之上的一门语言.是JS的扩展集和超集.任何一种javascript运行环境都支持. yarn init --yes yarn a ...
Struts和Sitemesh整合,实现多个装饰器
2019独角兽企业重金招聘Python工程师标准>>> web.xml配置 <filter><filter-name>struts-prepare</f ...
CDI services--Decorators(装饰器)
1.Decorators装饰器综述拦截器是一种强大的方法在应用程序捕捉运行方法和解耦.拦截器可以拦截任何java类型的调用. 这使得拦截器适合解决事务管理,安全性,以及日记记录. 本质上说,拦截 ...
java 设计模式示例_Java示例中的装饰器设计模式
java 设计模式示例 Decorator design pattern is used to modify the functionality of an object at runtime. A ...
python 装饰器(Decorators)原理说明
本文目的是由浅入深地介绍python装饰器原理装饰器(Decorators)是 Python 的一个重要部分其功能是, 在不修改原函数(类)定义代码的情况下,增加新的功能为了理解和实现装饰器,我 ...
python 装饰器分类_Python 装饰器(Decorators) 超详细分类实例
Python装饰器分类 Python 装饰器函数: 是指装饰器本身是函数风格的实现; 函数装饰器: 是指被装饰的目标对象是函数;(目标对象); 装饰器类 : 是指装饰器本身是类风格的实现; 类装饰器 ...
一文读懂 @Decorator 装饰器——理解 VS Code 源码的基础
作者:easonruan,腾讯 CSIG 前端开发工程师 1. 装饰器的样子我们先来看看 Decorator 装饰器长什么样子,大家可能没在项目中用过 Decorator 装饰器,但多多少少会看过下 ...

ECMAScript Decorators---装饰器

ECMAScript Decorators---装饰器

Decorators是什么

应用场景

原理

应用举例

babel 装换

参考链接

ECMAScript Decorators---装饰器相关推荐

最新文章

热门文章