ES6中新增了创建函数的方式：“箭头函数”
真实项目中是箭头函数和Function这种普通函数混合使用
箭头函数简化了创建函数的代码

  1. // 箭头函数的创建都是函数表达式方式（变量= 函数），这种模式下，不存在变量提升，也就是函数只能在创建完成后执行，（也就是创建的代码之后执行）
  2. const fn = ([形参])=>{
  3.   //函数t体
  4. }
  5. fn(实参)
  7. // 形参只有一个，小括号可以不加
  8. const fn =n=>{};
  10. //函数体中只有一句话，并且是return xxx的，可以省略大括号，和return
  11. const fn = n=>n*10
  13. function fn(n) {
  14.   return function(m) {
  15.     return m+(++n);
  16.   }
  17. }
  18. const fn =n=>m=>m+(++n);

箭头函数中没有arguments，但是可以基于剩余运算符获取实参集合，而且ES6是支持给形参设置默认值的

  1.    let obj = {};
  2.     let fn = (context = window, ...aaa) => {
  3.       // console.log(arguments);  报错，箭头函数中没有arguments属性
  4.       console.log(aaa);
  5.       // aaa：剩余运算符（把除第一项的，其他传递的实参信息都存储在aaa这个数组中
  6.     }
  7.     fn(obj, 10, 20, 30, 40); // context : obj, arg:[10,20,30,40]
  8.     fn(); // context : window aaa:[]

箭头函数中没有this，它里面用到的this，都是自己所处上下文中的this（真实项目中，一旦涉及this问题，箭头函数慎用）

  1.  // let obj = {
  2.     //   name: 'obj',
  3.     //   fn: fn
  4.     // }
  5.     // window.name = 'win'
  6.     // let fn = n => {
  7.     //   console.log(this.name);
  8.     // }
  9.     // // 此时Fn所处的上下文中的this都是window
  10.     // // fn(10) //win
  11.     // fn.call(obj, 10) //win 不是我们预期的obj
  12.     // document.body.onclick = fn;
  13.     // obj.fn(10) // this: window
  15.     // let obj = {
  16.     //   name: "erha",
  17.     //   fn: function () {
  18.     //     // this:obj  普通函数是有自己的this
  19.     //     let f = () => {
  20.     //       console.log(this); //obj
  21.     //     };
  22.     //     f();
  23.     //     return f
  24.     //   }
  25.     // }
  26.     // let f = obj.fn();
  27.     // f();
  29.     let obj = {
  30.       name: 'obj',
  31.       fn: function () {
  32.         // console.log(this.name);
  33.         // 原本期望需要：1s后把obj中的name改成珠峰
  34.         // setTimeout(function () {
  35.         //   console.log(this); //window
  36.         //   this.name = '珠峰'
  37.         // }, 1000)
  38.         // let that = this; //把需要的this存储起来
  39.         // setTimeout(function () {
  40.         //   console.log(that); //window
  41.         //   that.name = '珠峰' // 需要使用的时候拿出来
  42.         // }, 1000)
  43.         setTimeout(() => {
  44.           console.log(this); //obj
  45.           this.name = '珠峰'
  46.         }, 1000)
  47.       }
  48.     }
  49.     obj.fn();

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

  1. 箭头函数语法比普通函数更简洁，（es6每一种函数都可以使用形参默认值，和剩余运算符）
  2. 箭头函数没有自己的this，他的this是继承 函数所处上下文中的this（使用call，apply等任何方式都无法改变this的指向）
  3. 箭头函数没有arguments，只能基于…arg获取传递的参数集合（数组）
  4. 箭头函数不能被new执行（因为箭头函数中没用this也没有prototype）