Arrow functions in ES6

Arrow functions in 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问题

Review this pointing to the problem in ordinary functions

//=>普通函数执行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

No matter what we do, in the end this all points to the window: the arrow function does not have its own this, the this used in the host environment (superior scope) is 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

In future actual projects, it is not necessary to change all functions to arrow functions, but to modify them according to their own needs (for example: we need to make this in the function the this in the host environment, we use arrow functions, or not In relation to this question, we want to make the code easier to write and also use arrow functions ;)

  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
    }

}

For hierarchically nested arrow functions

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

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