浅谈ES6箭头函数
来源:互联网 发布:有关网络购物的消法 编辑:程序博客网 时间:2024/05/10 19:17
ES6标准新增了一种新的函数:Arrow Function(箭头函数)
箭头函数相当于匿名函数,且简化了函数定义。
1、箭头函数有两种格式:
① 只包含一个表达式,{ ... }和return都省略掉。
i => i * i
② 可以包含多条语句,不能省略{ ... }和return。
x => { if (x > 0) return x * x; else return - x * x;}
2、箭头函数的参数个数:
① 无参数:用括号()
() => 3.14
② 1个参数:
i => i * i
相当于:
function (i) { return i * i;}
③ 至少2个参数:用括号()括起来
(a, b) => a + b
相当于:
function (a, b) { return a + b;}
④ 可变参数:
(x, y, ..., arr) => { var i, sum = x + y; for (i = 0; i < arr.length; i++) sum += arr[i]; return sum;}
注意:
如果要返回一个对象,如果是单表达式,这么写会报错:x => { name: “Alice” }
因为和函数体的{ ... }有语法冲突,改为:x => ({ name: “Alice” })
3、this
虽然箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。也就是说,this对象是定义时所在的对象,而不是运行时所在的对象。箭头函数没有自己的this值,箭头函数内的this值继承自外围作用域。
① 一个内部函数不能直接从外部函数访问到this:
var object = { name: "My object", getName: function() { var func = function() { return this.name; // this指向window或undefined }; return func(); } }; alert(object.getName()); // 输出:undefined
除了可以通过将this对象存储在另一个变量(如that)中来解决这个问题,还可以使用箭头函数:
var object = { name: "My object", getName: function() { var func = () => { return this.name; // this指向object }; return func(); } }; alert(object.getName()); // 输出:My object
② 由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略。
var object = { name: "My object", getName: function() { var func = () => { return this.name; // this指向object }; return func.call({name: "Bruce"}); } }; alert(object.getName()); // 输出:My object
1 0
- 浅谈ES6箭头函数
- ES6 中的箭头函数
- ES6 箭头函数 柯里化
- ES6箭头函数=>
- es6箭头函数
- ES6箭头函数
- ES6箭头函数小结
- es6箭头函数
- ES6 箭头函数
- es6的箭头函数
- es6箭头函数
- es6箭头函数
- es6箭头函数
- ES6 箭头函数理解
- es6之箭头函数
- ES6中的箭头函数
- ES6-箭头函数 =>
- ES6 箭头函数
- 如何在安装pip3以及第三方python库(for Mac)
- java 命名和数据类型
- 指南针驱动(compass)移植
- 深度学习的目标
- Gulp前端构建工具
- 浅谈ES6箭头函数
- unity material之tiling和offset属性
- Windows如何传文件到远程计算机
- 获得了sl小程序,一个火车头小动画
- JAVA的Random类(转)
- 2016广东事业单位公共基础知识复习资料:物理学常识
- css和js实现最简单的轮播图效果
- python中map,filter和reduce函数区别
- MyBatis--查询缓存--ehcache二级缓存配置文件详解