Es6如何使用箭头函数和使用场景详解

ゞ浴缸里的玫瑰 2022-10-16 13:27 147阅读 0赞

# ES6 箭头函数 #

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

箭头函数提供了一种更加简洁的函数书写方式  
function关键字去掉,在形参括号后面添加符号=>

参数 => 函数体
    	var f = v => v;
    //等价于
    var f = function(v){
     return v;
    }
    f(1);  //1

如果没有形参,必须保留形参()

let fun = () => {
                return 'i miss  you';
            }
            fun();

对于一个形参而言省略形参的() 可以简化

let fun1 = val => {
                return 'i miss  you';
            }
            fun1('aa');

当箭头函数没有参数或者有多个参数，要用 () 括起来

var f = (a,b) => a+b;
    	f(6,2);  //8

如果函数体就一行 去掉函数体的\{\} 可以间接为如下格式

let fun = val =>{
                return val;
            }
            console.log(fun(1));
      let fun1 = val =>  val;//注意: => 符号后不能写return 关键字

当箭头函数函数体有多行语句，用 \{\} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 \{\} , 结果会自动返回。

var f = (a,b) => {
     let result = a+b;
     return result;
    }
    f(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

// 报错
    var f = (id,name) => {id: id, name: name};
    f(6,2);  // SyntaxError: Unexpected token :
     
    // 不报错
    var f = (id,name) => ({id: id, name: name});
    f(6,2);  // {id: 6, name: 2}

注意点：没有 this、super、arguments 和 new.target 绑定

var func = () => {
      // 箭头函数里面没有 this 对象，
      // 此时的 this 是外层的 this 对象，即 Window 
      console.log(this)
    }
    func(55)  // Window 
     
    var func = () => {    
      console.log(arguments)
    }
    func(55);  // ReferenceError: arguments is not defined

**适合使用的场景**

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：**箭头函数内部的this是词法作用域，由上下文确定**。（词法作用域就是定义在词法阶段的作用域。换句话说，**词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的**，因此当词法分析器处理代码时会保持作用域不变 。）

不适合使用的场景  
定义函数的方法，且该方法中包含 this

## 总结 ##

1.  类似于匿名函数，在某些情况下使用，可减少代码量
2.  代码简洁，this提前定义
3.  代码太过简洁，导致不好阅读
4.  this提前定义，导致无法使用js进行一些在ES5里面看起来非常正常的操作（若使用箭头函数，在监听点击事件的回调函数中，就无法获取到当前点击的元素
5.  总的来说，箭头函数只是一种函数的简写，有其利弊，可用可不用，看大家心情，当然也得用的正确