ES6 箭头函数

Posted 2022-07-20 MikrokosmosRun

文章目录

• 一、箭头函数是什么？
• 二、箭头函数的语法
• • 1.参数
  • 2.函数体
• 三、箭头函数与普通函数的区别

---

一、箭头函数是什么？

let fun = (a) => 
    console.log(a)
;

等同于

let fun = function (a) 
    console.log(a)
;

二、箭头函数的语法

1.参数

没有参数：写一个空括号

let fun1 = () => 
    console.log(111);
;

参数只有一个：可以省去包裹参数的括号

let fun2 = name => 
    console.log(`Hello $name !`)
;

多个参数：将参数依次用逗号隔开

let fun3 = (val1, val2, val3) => 
    return [val1, val2, val3];
;

2.函数体

如果函数体只有一句代码，简单的返回某个变量或者返回一个简单的js表达式，可以省去大括号

let show = val => val;
// 等同于
let show = function (val)  return val ;

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) 
  return num1 + num2;
;

如果函数体只有一条语句并且不需要返回值（如：调用一个函数），可以给这个语句前面加一个void关键字。

let fn = () => void notReturn();

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象会报错，可以在对象外面加上圆括号。

let obj = () => key:0,value:1;
obj();//Uncaught SyntaxError: Unexpected token :

//解决方法：
let obj = () => (key:0,value:1);
obj();//key:0,value:1

注意:() => 在谷歌浏览器不会报错，会解释为代码块中没执行语句。

let obj = () => ;
obj();//
let obj0 = () => ();
obj0();//

---

三、箭头函数与普通函数的区别

1、语法更加简洁、清晰

2、箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this

3、箭头函数继承而来的this指向永远不变

4、.call()/.apply()/.bind()无法改变箭头函数中this的指向

5、箭头函数不能作为构造函数使用

let Add = () => ;
let a = new Add();
a();//Uncaught TypeError: Add is not a constructor

6、箭头函数没有自己的arguments，可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表

//ES5:
var add = function(a,b)console.log(arguments);
add(1,2);//[1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//ES6:
let sum = (a,b) => console.log(arguments);
sum(1,2);//Uncaught ReferenceError: arguments is not defined

//解决方法：
let sum = (...rest) => console.log(rest);
sum(1,2);//[1, 2]

7、箭头函数没有原型prototype

8、箭头函数不能用作Generator函数，不能使用yeild关键字

9、箭头函数不具有super，不具有new.target