箭头函数和this

基本语法

• “箭头”（=>）定义函数

let fn =name => name;
console.log(fn(Mr.Lee));

• 普通函数代码

let fn=function (name){
    return name;
};

由此可见，箭头函数语法更简洁

箭头函数的参数

• 使用箭头符号(=>)定义函数的语法特征。

let fn=()=>'Mr,Lee';
console.log(fn());

• 箭头函数与可以传递两个或以上的参数，并实现运算后返回

let fn =(x,y)=>x+y;
console.log(fn(10,20));

// 函数代码为
let fn =function(x,y){
    return x+y;
}

• 如果你定义的函数 并不需要传递参数 直接用()返回就行

let fn=()=>'Mr,Lee';
console.log(fn());

• 如果函数体需要更复杂的操作，可以将箭头符号右边使用传统函数体

let fn=(x,y)=>{
    return x+y
}
console.log(fn(10,20));

• 如果箭头符号右边是对象，返回的是对象，则需要用圆括号包含着

let fn=name=>({
    name:name,age:100
});
console.log(fn('Mr.Lee').name);

• 如果箭头符号左边是对象作为参数，右边是对象的属性运算，也支持；

 let fn=({name,age})=>name+','+age;
 console.log(fn({name:'Mr.Lee',age:100}))

• 自我执行函数

((name)=>{
    console.log(name);
})('Mr.Lee');

绑定this

• 箭头语法

箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
let obj={
    name:'Mr.Lee',
    age:100,
    fn:function(){
        setTimeout(()=>{
            console.log(this);  //this指向的是我们所需要的 
            console.log(this.name+','+this.age);  //箭头函数中的this是最外层定义函数绑定，不受内部影响
        },500)
    }
};
obj.fn();

• 函数代码

1. JS内部首先会先生成一个对象。
2. 再把函数中的this指向该对象。
3. 然后执行构造函数中的语句。
4. 最后隐式的返回this。

let obj={
    name:'Mr.Lee',
    age:100,
    fn:function(){
         let that=this;
         setTimeout(function(){
             console.log(this);
             console.log(this.name+','+this.age);
         },500)
    }
};
obj.fn();

• this全局指向window 在某个对象内部指向当前对象
• 当obj对象下包含了类似setTimeout函数内部 这是指向就出现问题了
• Web环境下，它指向Window，而在node环境下它指向setTimeout
• 我们通常将this 在setTimeout外部进行赋值保存

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

箭头函数中的this指向

1. 箭头函数没有原型prototype
2. 箭头函数不会创建自己的This
3. 不能修改箭头函数的This指向
4. 箭头函数不能作为构造函数使用
5. 箭头函数没有自己的Arguments,请直接使用...other模式(rest运算符)

• 不支持aeguments绑定，请直接使用...other模式(rest运算符)

 let fn=(...other)=>{
    return other[0] + other[1]
 };
 console.log(fn(10,20));  //console.log(10,20);
 console(typeof fn);
 console .log(fn instanceof Function);

• 尾调用

  // 应用场景  递归函数 
  'use strict'; //内部进行优化
  function fn(x){
      console.log(x);
      if (x<=1) {
          return 1;
      }
      return fn(x-1);  //必须用return返回 并且不能包含其他参数
    }
    fn(10);

ES6思维导图