前端面试解析-02 ES6使用箭头函数时应该注意什么？

1、this的指向问题

    箭头函数要实现类似纯函数的效果，剔除了外部状态，所以箭头函数不具备普通函数所具备的this、arguments等。

    箭头函数自身没有this，箭头函数内部this会继承自箭头函数外部作用域，并且，不能通过apply（）、call（）、bind（）去改变this指向。下面为代码说明。

const obj1={
    fun1:()=>{
        console.log(this);   //this指向window
    },
    fun2:function(){
        console.log(this);    //this指向obj1
    }
}

obj1.fun1();  //在全局对象window下生效 指向window


obj1.fun2();    //在持有函数对象生效  指向obj1

2、arguments关键字

    对于普通函数来说，可以使用arguments关键字来获取到当前函数传入的参数，但是在箭头函数中不存在，如果想达到类似效果，可用rest代替。

//普通函数
function fun1(a,b){
	console.log(arguments[0]);
    console.log(arguments[1]);
}
fun1("aaa","bbb");    //打印 aaa、bbb
    

    注意：arguments是一个object对象，它不是数组，不能对它使用shift、push、join等方法。
    上述举例时用的arguments[i]中的i只是作为arguments对象的属性，并不能理解为数组下标。

//ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;}

add(2, 5, 3)  //10 上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数

本文内容均来自于网络，仅用于学习使用及知识共享。