JavaScript箭头函数

JavaScript箭头函数

箭头函数（arrow functions），是一个来自ECMAScript 2015（又称ES6）的全新特性。箭头函数有时候也叫“lambda表达式”。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

箭头函数 - JavaScript | MDN

JavaScript传统函数，基本语法是这样的：

function functionName(arg0, arg1, ... argN) {

  statements

}

函数如果有返回值，使用 return 运算符后跟要返回的值即可。函数在执行过 return 语句后立即停止代码。

例如：

function add(a,b)

 {

    return  a + b;

 }

 //调用add()

alert(add(1,2));    // 结果 3

JavaScript匿名函数：

我们也可以通过指派一个变量名给匿名函数的方式来定义它。

var|let add = function(a,b)

 {

    return  a + b;

 }

 //调用add()

alert(add(1,2));    // 结果 3

这个代码和前一个例子做了同样的事情。

用JavaScript箭头函数实现上例相同的功能

Var|let add = (a,b) => a+b

//调用

alert(add(1,2));    // 结果 3

JavaScript箭头函数语法

(param1, param2, …, paramN) => { statements }

有多个参数时，参数间逗号间隔，函数体含有多条语句需要用到大括号，函数体含有一条语句，大括号不是必须的,不用{}，return关键字也跟着不用。

(param1, param2, …, paramN) => expression

后者相当于 ：(param1, param2, …, paramN) =>{ return expression; }

当只有一个参数时，圆括号是可选的：

(singleParam) => { statements } 也可写为：

singleParam => { statements }

没有参数的函数应该写成一对圆括号。

() => { statements }

为什么会这样？因为如果不加 () ，那{ } 就表示的是语法块，不是表示一个对象，而加上()，按照规范来说，() 里面 { } 就会被解析为对象了。

加括号的函数体返回对象字面量表达式：

params => ({foo: bar})

箭头函数的确与传统函数有不同之处：

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。

2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。

3、箭头函数 不能用 new 关键字来实例化对象，不然会报错。

4、箭头函数没有arguments对象。

但与传统函数仍存在共同的特点，例如：

1.对箭头函数进行typeof操作会返回“function”。

2.箭头函数仍是Function的实例，故而instanceof的执行方式与传统函数一致。

3箭头函数支持普通函数参数的所有功能，包括默认值、解构、rest 参数等。

箭头函数的例

var demo = (a,b) =>{

if(a>b){

    return a-b;

} else{

    return b-a;

  }

}

相当于：

var demo = function（a,b）{

if(a>b){

    return a-b;

} else{

    return b-a;

  }

}

写箭头函数要点，按顺序写参数、箭头、函数体

参数在 () 内，没有参数，() 必须写；一个参数，() 可写可不写；多个参数，() 必须写。如果不确定，() {} 写不写，该不该省略，那就写，写了不会错。

1、只有一个参数时，() 可省略

//不简写

var demo = (x) =>{

    console.log(x**2); //幂运算符**

}

//简写

var demo = x =>{

    console.log(x**2);

}

2、函数体只有一句时， {} 可以省略

//不简写

var demo = (x) =>{

    console.log(x**2);

}

//简写

var demo = x => console.log(x**2); *

3、函数体只有一条返回语句时，{} 和 return 都可以省略

//不简写

var demo = (x) => {

     return x**2; //幂运算符**;

}

//简写

var demo = (x) => x**2; //幂运算符**

注意，别写成这样 var demo = (x) =>{ x**2 }; 

或者 这样  var demo = (x) => return  x**2; 

即要省略就都省略，不省略就都不省，别省一半，不然会出错的。

箭头函数的确与传统函数有不同之处,可见https://segmentfault.com/a/1190000012067545

另外，箭头函数，一般完成简短的功能，不太适合需要较多行才能完成的功能.

附录

JavaScript函数JavaScript函数_cnds123的专栏-CSDN博客

JavaScrip的函数知识点总结JavaScrip的函数知识点总结_cnds123的专栏-CSDN博客