js箭头函数
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
为什么叫Arrow Function?因为它的定义用的就是一个箭头
x =>x*x
相当于:
function(x) {
return x*x;
}
箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{……}和return都省略掉了。还有一种可以包含多条语句。这个时候就不能省略{……}和return:
x=>{
if(x>0){
return x*x;
}
else {
return - x*x;
}
}
如果参数不是一个,就需要用括号()起来:
//两个参数:
(x,y) => x * x + y * y
//无参数
() => 3.14
//可变参数:
(x,y,...rest) =>{
var i,sum=x+y;
for(i=0;i<rest.length;i++) {
sum += rest[i];
}
return sum;
}
如果要返回一个对象,就要注意,如果是单表达式,要这么写:
//SyntaxError
x =>{foo:x} //因为和函数体的{……}有语法冲突,所以:
//ok
x=>({foo:x})
this
箭头函数看上去是匿名函数的一种简写,但是实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。由于JavaScript函数对this绑定的错误处理。下面的例子无法得到预期结果:
var obj = {
birth:1990,
getAge:function(){
var b = this.birth;//
var fn = function(){
return new Date().getFullYear() - this.birth;//this指向window或undefined
};
return fn();
}
};
现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:
var obj = {
birth:1990,
getAge:function () {
var b = this.birth;//
var fn = () => new Date().getFullYear() - this.birth;//this指向obj对象
return fn();
}
};
obj.getAge();//
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:
var obj = {
birth:1990,
getAge:function(year) {
var b = this.birth;//
var fn = (y) =>y-this.birth;//this.birth仍是1990
return fn.call({birth:2000},year);
}
};
obj.getAge(2015);//
js箭头函数的更多相关文章
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- js箭头函数 的 (e) => { } 写法笔记
1. (e) => {} 是ES 6 新语法,默认是Es 5.1,因此在这里设置一下就不会提示红色下划线了 2.使用: (e) => {} , 其实就是function (e){} 的缩 ...
- js(=>) 箭头函数 详细解说 案例大全
ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: fu ...
- js 箭头函数
箭头函数 ES6标准新增了一种新的函数:Arrow Function(箭头函数). x => x * x相当于: function (x) { return x * x; }箭头函数相当于匿名函 ...
- node.js箭头函数使用
ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1 ...
- JS箭头函数的this
箭头函数的this看定义他的时候,他的外层有没有函数 有:外层函数的this就是箭头函数的this 无:箭头函数的this就是window obj = {age:18, getAge: ()=> ...
- js 箭头函数不适用的场景
箭头函数虽然方便但也不是每个地方都适用, 箭头函数在开发中可以十分方便的干预 this的指向,在一些情况下,是不需要对this的指向进行干预的,也就不适用箭头函数 1.构造函数的原型方法上 例如:Pe ...
- JS - 箭头函数与 () {} 的作用域
foo () { // ... } 等价于 foo: function () { // ... } foo: () => { // ... } 范例: // 全局 name = 'zhangsa ...
- JS 函数(arguments、箭头函数、bind)
参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传 ...
随机推荐
- ACdream 1099——瑶瑶的第K大——————【快排舍半,输入外挂】
瑶瑶的第K大 Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status ...
- js获取当前日期,格式为YYYY-MM-DD
//获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = "-& ...
- Maven入门之简介与安装
一.Maven简介 1.什么是Maven? Maven是一个项目管理工具和集成编译工具,它主要包含如下内容: –一个项目对象模型(Project Object Model), –一组标准集合, –一个 ...
- 修改Linux时区的2种办法
由于Azure 上所有的服务时间都采用了 UTC 时间.UTC 时间比中国时间晚 8 个小时,该如何按照自己的需要来进行修改呢,下面提供2种办法以供参考: 1.修改 /etc/localtime 文件 ...
- 【数据库】3.0 MySQL入门学习(三)——Windows系统环境下MySQL安装
1.0 我的操作系统是window10 专业版 64位.,不过至少windows7以上系统都是一样的. 关于MySQL如何下载,请参考博文: [数据库]2.0 如何获得MySQL以及MySQL安装 h ...
- SelectedItems的用法讲解
在做俄罗斯方块的时候写了下面一段代码: private void listView1_SelectedIndexChanged(object sender, EventArgs e) ...
- 30 Excellent WordPress Video Tutorials
http://sixrevisions.com/wordpress/30-excellent-wordpress-video-tutorials/ WordPress是一种使用PHP语言开发的博客平台 ...
- Ubuntu16.04安装Docker1.12+开发实例+hello world+web应用容器
本次主要是详细记录Docker1.12在Ubuntu16.04上的安装过程,创建Docker组(避免每次敲命令都需要sudo),Docker常用的基本命令的总结,在容器中运行Hello world,以 ...
- 【Linux】Linux 找回Root用户密码
Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...
- Spring Freamwork 开发初体验
工具 eclipse 版本:Neon.3 Release (4.6.3) Spring Freamwork 版本:4.0.4.RELEASE 下载地址:http://repo.springsource ...