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. mongo connect BI 连接至Power BI

    第一步:安装mongodb服务 官网地址:https://www.mongodb.com/download-center?jmp=nav#community mongodb的安装请参考:http:// ...

  2. js string trim实现

    String.prototype.trim = function() { var str = this, whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u20 ...

  3. CF1027C Minimum Value Rectangle【贪心/公式化简】

    https://www.luogu.org/problemnew/show/CF1027C #include<cstdio> #include<string> #include ...

  4. SVN版本控制软件

    一.版本控制软件 1.为什么需要版本控制软件 问题:① 团队开发 ② 异地协作 ③ 版本回退 2.解决之道 SCM(Software Configuration Management):软件配置管理 ...

  5. Codeforces Round #260 (Div. 1) Boredom(DP)

    Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  6. qwb与学姐 (带秩并查集)

    qwb与学姐 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 149  Solved: 54[Submit][Status][Web Board] Des ...

  7. 静态call 动态call LINK

    COBOL的调用可以是静态调用(Static Call),这时,被调用的子程序必须与调用程序一起链接(link-edited)起来形成一个完整的装载模块(Load module),但子程序依然可以单独 ...

  8. python正则表达式中的分组 group

    维基百科:http://wiki.ubuntu.org.cn/Python%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%93%8D%E4%BD%9C ...

  9. [BZOJ4455][ZJOI2016]数星星(容斥DP)

    4455: [Zjoi2016]小星星 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 707  Solved: 419[Submit][Status] ...

  10. Python学习札记

    Python是很多公司都在使用的一种脚本语言,其语法与Perl.C++.JAVA等都大同小异.本文仅对一些比较常用的语法结构进行总结,比如字典.列表.正则匹配.读写文件等.供广大喜爱Python的同学 ...