[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 ...
随机推荐
- mongo connect BI 连接至Power BI
第一步:安装mongodb服务 官网地址:https://www.mongodb.com/download-center?jmp=nav#community mongodb的安装请参考:http:// ...
- js string trim实现
String.prototype.trim = function() { var str = this, whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u20 ...
- CF1027C Minimum Value Rectangle【贪心/公式化简】
https://www.luogu.org/problemnew/show/CF1027C #include<cstdio> #include<string> #include ...
- SVN版本控制软件
一.版本控制软件 1.为什么需要版本控制软件 问题:① 团队开发 ② 异地协作 ③ 版本回退 2.解决之道 SCM(Software Configuration Management):软件配置管理 ...
- Codeforces Round #260 (Div. 1) Boredom(DP)
Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- qwb与学姐 (带秩并查集)
qwb与学姐 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 149 Solved: 54[Submit][Status][Web Board] Des ...
- 静态call 动态call LINK
COBOL的调用可以是静态调用(Static Call),这时,被调用的子程序必须与调用程序一起链接(link-edited)起来形成一个完整的装载模块(Load module),但子程序依然可以单独 ...
- 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 ...
- [BZOJ4455][ZJOI2016]数星星(容斥DP)
4455: [Zjoi2016]小星星 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 707 Solved: 419[Submit][Status] ...
- Python学习札记
Python是很多公司都在使用的一种脚本语言,其语法与Perl.C++.JAVA等都大同小异.本文仅对一些比较常用的语法结构进行总结,比如字典.列表.正则匹配.读写文件等.供广大喜爱Python的同学 ...