欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
 });


相关标签: js

上一篇:

下一篇: