[ES6] 06. Arrow Function =>
ES6 arrow function is somehow like CoffeeScirpt.
CoffeeScript:
//function call
coffee = -> coffee()
coffee=(message) -> coffee("Yo"), coffee "Yo"
coffee=(message, other) -> coffee("Yo", 2), coffee "Yo", 2
Now we rewrite a ES5 function to ES6 function:
ES5:
var greeting = function(message, name){
return message + name;
}
ES6:
First thing in ES6, we can remove the function keyword and add => on the right side of the params:
var greeting = (message, name) => {
return message + name ;
}
Second, we can remove 'return' and {};
var greeting = (message, name) => message + name
Example 1:
var f = () => 5;
// 等同于
var f = function (){ return 5 };
Example 2:
//ES6
var msg = message => "Hello Es6"//ES5
var msg = function(message){
return "Hello Es6";
}
Example 3:
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
}); // 箭头函数写法
[1,2,3].map(x => x * x);
Example 4:
// 正常函数写法
var result = values.sort(function(a, b) {
return a - b;
}); // 箭头函数写法
var result = value.sort((a,b)=> a- b)
=> function helps to sovle the context problem:
//ES5 var deliveryBoy = {
name: "John", receive: function(){
var that = this;
this.handleMessage("Hello", function(message){
//Here we have a very amazing handle function
//which combine the name and message
console.log(message + ' '+that.name);
});
}, handleMessage: function(message, handler){
handler(message);
} } deliveryBoy.receive();
In the code, we see:
console.log(message + ' '+that.name);
We use var that = this; and that.name to refer to "John". It looks quite confusing.
Arrow function helps us out of this:
var deliveryBoy = {
name: "John", receive: function(){this.handleMessage("Hello", message => console.log(message + ' '+this.name));
}, handleMessage: function(message, handler){
handler(message);
} } deliveryBoy.receive();
Inside the code, we still use this.name to refer "John". This is because, => refer to the deliveryBoy object.
箭头函数有几个使用注意点。
- 函数体内的this对象,绑定定义时所在的对象,而不是使用时所在的对象。
- 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
- 不可以使用arguments对象,该对象在函数体内不存在。
[ES6] 06. Arrow Function =>的更多相关文章
- 理解es6 中 arrow function的this
箭头函数相当于定义时候,普通函数.bind(this)箭头函数根本没有自己的this,导致内部的this就是定义时候的外层代码块中的this.外层代码块中的this,则取决于执行时候环境上下文cont ...
- 廖雪峰js教程笔记5 Arrow Function(箭头函数)
为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...
- vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...
- ES6 Arrow Function & this bug
ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...
- [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...
- ES6 Arrow Function All In One
ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...
- ES6 arrow function vs ES5 function
ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...
- ES6 Arrow Function return Object
ES6 Arrow Function return Object https://github.com/lydiahallie/javascript-questions/issues/220#issu ...
- ES6 new syntax of Arrow Function
Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...
随机推荐
- asp.net webform 打造私人后台管理系统(附源码)
系统简介 git地址:https://github.com/qingfengjun/XSSystem 不少人让我做公司的网站,要求不多,但是需要有一个后台系统,所以就有了开发的动力.也想做个系统自己学 ...
- es6 map数据类型,要比set还很多
首先它支持多数据存储,具有增删查功能 set()设置 get()获取; has()查找; delete('obj')删除指定:clear()全部删除 size长度 let json={ name:&q ...
- 出现Unrecognized field "state" (class com.jt.manage.pojo.ItemCat)异常
当在pojo中,往往会出现字段无法一一对应时,有可能就会出现创建Unrecognized field "state" (class com.jt.manage.pojo.ItemC ...
- Kbengine cocos2djs 地图问题
KBEngine.addSpaceGeometryMapping(self.spaceID, None, resPath) 问下这个resPath加载的文件在哪里,后端愣是没找到,前端倒是看到了,还是 ...
- 开源游戏地图编辑器MarbleMap
开源游戏地图编辑器MarbleMap MIT协议,MarbleMap是一款as3开发的游戏地图编辑器,他免费开源,同时支持Cocos2d-x坐标系和AS3坐标系,功能丰富,不过是一款新推出的开源项目, ...
- mvc controller放目录里面该怎么办?
方法一,可以在目录中命名一个和目录同样名字的controller,然后用特性来进行设置,比如: Controllers/myfolder/myfolderController.cs 我建立了上述结构, ...
- 写的模块和方法 wap 和 pc
createjs 画了一个曲线功能 rem 的适配方式 $.fn.stop 方法, zepto 没有的, 对于 2d的旋转 变形 还有 移动都可以停下来, 做动画的属性存储, getComputedS ...
- 【BZOJ 1119】 1119: [POI2009]SLO (置换)
1119: [POI2009]SLO Description 对于一个1-N的排列(ai),每次你可以交换两个数ax与ay(x<>y),代价为W(ax)+W(ay) 若干次交换的代价为每次 ...
- BZOJ 2225 [Spoj 2371]Another Longest Increasing(CDQ分治)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2225 [题目大意] 给定N个数对(xi,yi),求最长上升子序列的长度. 上升序列定义 ...
- [UOJ62]怎样跑得更快
以下用等号代替同余 这个式子是$\sum\limits_{j=1}^n(i,j)^{c-d}i^dj^dx_j=b_i$ 令$g(n)=\sum\limits_{e|n}\mu\left(\frac ...