ES6中的箭头函数

ES6中的箭头函数
箭头函数的基础语法

 let fn = function (x,y) {
     return x+y;
 }
 fn(10,20);
//=>改写成箭头函数
let fn=(x,y)=> x+y;


let fn2 = function () {
    let x =10,
        y = 20;
    console.log(x+y);
    return x+y;
};
fn2();
//=>改写成箭头函数
let fn2 =()=>{
    let x =10,
        y = 20;
    console.log(x+y);
    return x+y;
};

let fn3 = function (n = 0) {
    let x =10,
        y = 20;

    return x+y+n;
};
//=>改写成箭头函数
let fn3 =(n=0)=>{
    let x =10,
        y = 20;
    return x+y+n;
};

箭头函数中不支持arguments

//传统的函数支持arguments
// let fn = function () {
//         console.log(arguments);//10 20 30 40
//     let arg = Array.prototype.slice.call(arguments);
//     return eval(arg.join('+'));
// };
//arguments 箭头函数中不支持
let fn = (...arg)=>{
   // console.log(arguments);//Uncaught ReferenceError: arguments is not defined
    console.log(arg instanceof Array);// true
    return eval(arg.join('+'))
}//不支持arguments，我们使用es6中的剩余运算符...来获取传递进来的所有参数值(使用剩余运算符接收到的结果本身就是一个数组，不需要再转换了)
//let fn = (...arg) => eval(arg.join('+')); 任意数求和
console.log(fn(10, 20, 30, 40));

箭头函数中的this问题

复习普通函数中this指向问题

//=>普通函数执行this指向：看函数执行前面是否有点，有点，点前面是谁 this就是谁 没有点 this指向window或者undefined(严格模式下)
    let obj = {
          name:'xx',
        fn() {
            //与sum编译后效果一样
            console.log(this);
        },
        sum:function () {

        }
    };

obj.fn();//obj

document.body.onclick = obj.fn();//this:body
setTimeout(obj.fn,1000);//this:window
obj.fn.call(12);//this:12

不管我们怎么操作，最后this都指向window：箭头函数中没有自己的this，用到的this都是所在宿主环境（上级作用域）中的this

    let obj = {
          name:'xx',
        fn:()=> {
            console.log(this);//不管我们怎么操作，最后this都指向window：箭头函数中没有自己的this，用到的this都是所在宿主环境（上级作用域）中的this
        }
    };

obj.fn();//obj

document.body.onclick = obj.fn();//this:window
setTimeout(obj.fn,1000);//this:window
obj.fn.call(12);//this:window

以后实战项目中，不是要把所有的函数都改为箭头函数，根据自身需要来修改即可(例如：我们需要让函数中的this是宿主环境中的this，我们才是用箭头函数，或者不涉及this问题，我们想让代码写起来简单一些也可以使用箭头函数；)

  let obj2 = {
      name:'xx',
      fn(){
          //this obj
          // setTimeout(function () {
          //     //this window
          // }.bind(this),10000);


          // var _this = this;
          // setTimeout(function () {
          //          //this obj
          //      },10000);

          setTimeout(()=>{
              //this obj
          },10000)
      }
  } ;
  obj.fn();

箭头函数中一点扩充

let fn = ()=>{
    console.log(this);//window
};

let obj = {
    sum:function () {
        //this obj
        fn();//this window//宿主环境：不是执行的环境而是定义的环境,fn虽然是这里执行，但是他是在window下定义的，所以他的宿主环境还是window
    }

}

对于层级嵌套的箭头函数

// let fn = function (i){
//     i++;
//     return function (n) {
//         return n+(++i);
//     }
// }

let fn = i =>(n)=>n + (++i);