es6箭头函数(Arrow Function)
程序员文章站
2023-12-21 13:20:10
...
箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」(=>)来定义函数的新语法。
箭头函数与传统的JavaScript函数主要区别在于以下几点:
1.对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
2.new 不可用。箭头函数不可以当做构造函数使用,不能使用 new 关键字来实例化对象,不然会报错。
3.this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。
5、不可以使用yield命令,箭头函数不能用作Generator函数;
这些差异的存在是有理可循的。首先,对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值,或得出意外结果。其次,将箭头函数限制为使用固定this引用,有利于JavaScript引擎优化处理。
var reflect = value => value;
// 等同于:
var reflect = function(value) {
return value;
};
传一个参数,不用加小括号。箭头指向函数主体,函数主体也只是简单的一条返回语句,所以也不用加大括号。函数构造完毕赋给reflect加以引用。
var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {
return num1 + num2;
};
函数体内的语句大于一条的话,它的写法如下使用一个大括号将其括起来,并使用return语句返回var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {
return num1 + num2;
};
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象时,必须在对象外面加一个小括号var getTempItem = id = > ({
id: id,
name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};
上例可以看出,用小括号包含大括号则是对象的定义,而非函数主体。
数组的sort/map/reduce等方法都支持回调函数。箭头函数的一个用处是简化回调函数。
var result = values.sort((a, b) => a - b);
//等同于
var result = values.sort(function(a, b) {
return a - b;
});
推荐阅读
-
es6箭头函数(Arrow Function)
-
ES6 function函数和箭头函数区别
-
ES6箭头函数与function区别
-
ES6 箭头函数: () => {} 与匿名函数 function() {}
-
ES6:箭头函数(Arrow Function)
-
ES6的箭头函数(Arrow Function)
-
js es6 => arrow function箭头函数
-
es6 箭头函数 rest参数 扩展运算符
-
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
-
详解Javascript ES6中的箭头函数(Arrow Functions)