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

1、this的指向

     箭头函数this的指向来自定义时最近一层作用域的this指向（window或最近一层作用域的this）

     普通函数的this是在调用时确定的

2、箭头函数的this指向不能直接改变

     可以通过改变最近一层作用域this的指向来改变箭头函数的this

let a,
barObj = { msg: 'bar的this指向' };
fooObj = { msg: 'foo的this指向' };
bar.call(barObj);             // 将bar的this指向barObj，这时箭头函数this的指向为barobj
foo.call(fooObj);             // 将foo的this指向fooObj

function foo() {
  a();                        // 结果：{ msg: 'bar的this指向' },这时箭头函数的指向并没有变为 
  fooObj,而是继续保持一开始的指向
}

// 箭头函数在bar中定义 this继承于bar函数的this指向，就看谁调用bar了
function bar() {
  a = () => {
    console.log(this, 'this指向定义的时候外层第一个普通函数'); // 
  }; 
}

2、以下代码执行的结果是：

function fun () {
    return () => {
        return () => {
            return () => {
                console.log(this.name)
            }
        }
    }
}
var f = fun.call({name: 'foo'})
var t1 = f.call({name: 'bar'})()()
var t2 = f().call({name: 'baz'})()
var t3 = f()().call({name: 'qux'})

  A、foo foo foo  B、bar bar bar  C、qux qux qux  D、bar baz qux

   应该选A，这题一开始我选的是D，这题考的是箭头函数的this，是在函数定义时确定的，且确定了就不会再改变了

3、没有prototype，不能new

let a = () => {};
let b = new  a(); // a is not a constructor

4、没有arguments对象

   如果this指向window,使用arguments会报错；

   如果this指向普通函数，arguments会自动继承最近一层普通函数的arguments，可以使用rest运算符取参数（...)

  ...在普通函数或者箭头函数中都可以使用，但要注意：

  a. 使用的地方必须是函数的最后一个参数

let a = (first, ...rest, three) => {
  console.log(first, rest,three); // 报错：Rest parameter must be last formal parameter
};
a(1, 2, 3, 4);

  b. 函数的length属性不包括...运算符

(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

length可以获取到函数的参数长度

插入：rest运算符

   rest运算符是ES6的API，它可以获取函数不定数量的参数，可以代替arguments

let a = (first, ...abc) => {
  console.log(first, abc); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);

   优点：

       1、在普通函数和箭头函数中都可以使用

       2、直接在函数参数括号里定义，可读性更好，不会再函数体内突然出现arguments

       3、rest获取的是一个真正的数组，可以使用数组的方法，而arguments只是一个类数组对象

arguments.push(0); // arguments.push is not a function

      argumments通过rest运算符或者Array.from转化为真正的数组

arguments = [...arguments]; 或者 ：arguments = Array.from(arguments);

5、不能进行函数提升

6、没有yield属性,不能作为Generater生成器使用

7、没有new.target

    可以用于判断构造函数是否为new调用，会返回该构造函数的引用

8、箭头函数不支持函数参数重命名，普通函数可以

function func1(a, a) {
  console.log(a, arguments); // 2 [1,2]
}

var func2 = (a,a) => {
  console.log(a); // 报错：在此上下文中不允许重复参数名称
};
func1(1, 2); func2(1, 2);

小栗子：

下列对js箭头函数描述错误的是（C）

  A、箭头函数没有原型属性

  B、箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

  C、箭头函数可以作为构造函数，使用new

  D、箭头函数不绑定arguments，取而代之用rest参数解决