本文我们介绍箭头(arrow)函数的优点。

更简洁的语法
我们先来按常规语法定义函数：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

function funcName(params) {
return params + 2;
}
funcName(2);
// 4

 

该函数使用箭头函数可以使用仅仅一行代码搞定！

var funcName = (params) => params + 2
funcName(2);
// 4
　

 

是不是很酷！虽然是一个极端简洁的例子，但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法：

(parameters) => { statements }


如果没有参数，那么可以进一步简化：

() => { statements }


如果只有一个参数，可以省略括号:

parameters => { statements }

 

如果返回值仅仅只有一个表达式(expression), 还可以省略大括号：

parameters => expression


// 等价于:
function (parameters){
return expression;
}
　

 

现在你已经学会了箭头函数的语法，我们来实战一下。打开Chrome浏览器开发者控制台，输入：

var double = num => num * 2

我们将变量double绑定到一个箭头函数，该函数有一个参数num, 返回 num * 2。 调用该函数：

double(2);
// 4

double(3);
// 6
　　

没有局部this的绑定

和一般的函数不同，箭头函数不会绑定this。 或则说箭头函数不会改变this本来的绑定。
我们用一个例子来说明：

function Counter() {
this.num = 0;
}
var a = new Counter();

因为使用了关键字new构造，Count()函数中的this绑定到一个新的对象，并且赋值给a。通过console.log打印a.num，会输出0。

console.log(a.num);
// 0

-------------------------------------------------------------------------------------------------------

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和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 })


还可以继续参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

转自：https://www.cnblogs.com/fundebug/p/6904753.html

           https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

 

 


 
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄