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 =>的更多相关文章

  1. 理解es6 中 arrow function的this

    箭头函数相当于定义时候,普通函数.bind(this)箭头函数根本没有自己的this,导致内部的this就是定义时候的外层代码块中的this.外层代码块中的this,则取决于执行时候环境上下文cont ...

  2. 廖雪峰js教程笔记5 Arrow Function(箭头函数)

    为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...

  3. vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug

    vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...

  4. ES6 Arrow Function & this bug

    ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...

  5. [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  6. ES6 Arrow Function All In One

    ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...

  7. ES6 arrow function vs ES5 function

    ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...

  8. ES6 Arrow Function return Object

    ES6 Arrow Function return Object https://github.com/lydiahallie/javascript-questions/issues/220#issu ...

  9. ES6 new syntax of Arrow Function

    Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...

随机推荐

  1. asp.net webform 打造私人后台管理系统(附源码)

    系统简介 git地址:https://github.com/qingfengjun/XSSystem 不少人让我做公司的网站,要求不多,但是需要有一个后台系统,所以就有了开发的动力.也想做个系统自己学 ...

  2. es6 map数据类型,要比set还很多

    首先它支持多数据存储,具有增删查功能 set()设置 get()获取; has()查找; delete('obj')删除指定:clear()全部删除 size长度 let json={ name:&q ...

  3. 出现Unrecognized field "state" (class com.jt.manage.pojo.ItemCat)异常

    当在pojo中,往往会出现字段无法一一对应时,有可能就会出现创建Unrecognized field "state" (class com.jt.manage.pojo.ItemC ...

  4. Kbengine cocos2djs 地图问题

    KBEngine.addSpaceGeometryMapping(self.spaceID, None, resPath) 问下这个resPath加载的文件在哪里,后端愣是没找到,前端倒是看到了,还是 ...

  5. 开源游戏地图编辑器MarbleMap

    开源游戏地图编辑器MarbleMap MIT协议,MarbleMap是一款as3开发的游戏地图编辑器,他免费开源,同时支持Cocos2d-x坐标系和AS3坐标系,功能丰富,不过是一款新推出的开源项目, ...

  6. mvc controller放目录里面该怎么办?

    方法一,可以在目录中命名一个和目录同样名字的controller,然后用特性来进行设置,比如: Controllers/myfolder/myfolderController.cs 我建立了上述结构, ...

  7. 写的模块和方法 wap 和 pc

    createjs 画了一个曲线功能 rem 的适配方式 $.fn.stop 方法, zepto 没有的, 对于 2d的旋转 变形 还有 移动都可以停下来, 做动画的属性存储, getComputedS ...

  8. 【BZOJ 1119】 1119: [POI2009]SLO (置换)

    1119: [POI2009]SLO Description 对于一个1-N的排列(ai),每次你可以交换两个数ax与ay(x<>y),代价为W(ax)+W(ay) 若干次交换的代价为每次 ...

  9. BZOJ 2225 [Spoj 2371]Another Longest Increasing(CDQ分治)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2225 [题目大意] 给定N个数对(xi,yi),求最长上升子序列的长度. 上升序列定义 ...

  10. [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 ...