[Javascript] Decorators in JavaScript
First, what is 'High Order function', basic just a function, inside the function return another fuction.
// High order fucntion function fn() {
return function(){ }
}
For example:
function compose(a, b) {
return function(c){
return a(b(c));
}
} function addTwo(val){
return val + 2;
} function tiemsTwo(val){
return val * 2;
} const val = compose(addTwo, tiemsTwo)(50);
console.info(val); // 102
Decorators is a subset of high order fucntion:
function fluent(fn){
return function(...args){
fn.apply(this, args);
return this;
}
} function Person(){} Person.prototype.setName = fluent(function(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}) Person.prototype.getName = fluent(function(){
console.log(this.firstName + ' ' + this.lastName);
}) var p = new Person(); console.log( p.setName('John', 'Kent').getName());
In this code, fluent actually decorate Person class, make it chainable.
But In ES6:
class Person {
setName(f, l) {
this.firstName = f;
this.lastName = l;
} getName() {
console.log(this.firstName, this.lastName);
}
}
We have no way to wrap setName and getName fucntion in fluent(). So that's way decorator comes in.
To use decorator to descorate a function in class:
function decorate(target, keys, descriptor){
var fn = descriptor.value; // Overwrite the value, which in this case is function
descriptor.value = function(...args){
fn.apply(target, args);
return target;
}
} class Person { @decorate
setName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
} @decorate
getName(){
console.log(this.firstName, this.lastName);
}
} const p = new Person();
console.log(p.setName("Wan", "Zhentian").getName());
And it would be nice to reuse the fluent function:
function fluent(fn){
return function(...args){
fn.apply(this, args);
return this;
}
}
So we can do:
function fluent(fn){
return function(...args){
fn.apply(this, args);
return this;
}
} function decorateWith(fn){
return (target, keys, descriptor) => {
// fn here refers to setName or getName
// fn should be call with in target context, which means Person{}
// the second argument in call() is function to be passed into fluent() function
descriptor.value = fn.call(target, descriptor.value);
}
} class Person { @decorateWith(fluent)
setName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
} @decorateWith(fluent)
getName(){
console.log(this.firstName, this.lastName);
}
} const p = new Person();
console.log(p.setName("Wan", "Zhentian").getName());
[Note]: call(context, arguement, arguement, ....); here arguement is sinlge value
apply(context, arguements): here arguements is array
[Javascript] Decorators in JavaScript的更多相关文章
- JavaScript权威设计--JavaScript函数(简要学习笔记十一)
1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十)
1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...
- javascript笔记:javascript的关键所在---作用域链
javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- Javascript学习2 - Javascript中的表达式和运算符
原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
随机推荐
- 1.2 Broadcast
在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.而BroadcastReceiver是对发送出来的 Broadcast进行过滤接受并响应的一类组件. 一个Broad ...
- JAVA的JNI调用
由于JNI调用C和调用C++差不多,而且C++中可以混合写C代码,所以这里主要是写关于JNI调用C++的部分. 一般步骤: 先是写普通的Java类,其中包括本地方法调用. 然后编译这个Java类,调 ...
- HDU 2019 数列有序!
Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u Java class name ...
- Magicodes.WeiChat——WeChatOAuthTest(网页授权获取用户基本信息)
Demo访问地址:http://wechat.magicodes.net/app/AppDemo/WeChatOAuthTest?tenantId=1 关于公众号如何获取用户信息,请参考此文档:htt ...
- solr与.net系列课程(九)solr5.1的配置
solr与.net系列课程(九)solr5.1的配置 最近一些园友来咨询solr5.1的配置方式,然后我就去官网下载了个最新版本的solr,发现solr5.0以后solr的下载包里的内容发生的变化,移 ...
- node-webkit教程(10)Platform Service之File dialogs
node-webkit教程(10)Platform Service之File dialogs 文/玄魂 目录 node-webkit教程(10)Platform Service之File dialog ...
- [ACM_模拟] ZJUT 1155 爱乐大街的门牌号 (规律 长为n的含k个逆序数的最小字典序)
Description ycc 喜欢古典音乐是一个 ZJUTACM 集训队中大家都知道的事情.为了更方便地聆听音乐,最近 ycc 特意把他的家搬到了爱乐大街(德语Philharmoniker-Stra ...
- 【点滴javascript】变量与作用域
基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引用类型:多个值构成的对象 在变量赋值结束后,解析器必须知道这个变量时基本数据类型还是引用类型,需要注意的 ...
- JavaScript 闯关记
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...
- 语音直播是否真能让国内网红向“Creator”转变?
2016年,“直播”.“网红”成为了互联网领域最热门的关键词,一时间整个国内市场涌现出了数百家直播平台,而一些视频网站.新闻客户端.社交平台.电商平台等也纷纷推出直播功能.不仅仅只是创业者们像发了疯似 ...