ES6 06箭头函数和this

 

 要点：1.箭头函数 2.this绑定

 

 一.箭头函数

 1.ES6新增一个使用(=>)箭头符号定义函数的语法特征

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

// 翻译成函数代码为：
 let fn=function(name){
     return name;
 }

 

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

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

// 翻译成函数代码：
 let fn=function(x,y){
    return x+y;
 }

 

3.若定义的函数，不需要传参，可用()括号方式直接返回

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

// 翻译成函数：
 let fn=function(){
     return 'Mr.Lee';
 }

 

 

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

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

 

 5.若箭头符号右边是对象，返回的是对象，则需要用圆括号包含着

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

// 翻译成函数
 let fn=function(name){
     return{
         name:name,
         age:100
     }  
 };
 console.log(fn('Mr.Lee').name);

  

6.若箭头符号左边是对象作为参数，右边是对象的属性运算，也支持

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

  

 7.自我立即执行函数，也可以使用箭头函数来创建

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

// 翻译成函数代码
 (function(name){
     console.log(name);
 })('Mr.Lee');

  

 二.绑定this

 1.ES6之前有个this指向的问题

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

  

 2.上例，this全局指向window，在某个对象内部指向当前对象

 3.当obj对象下包含类似setTimeout函数内部，this指向出问题

 4.Web环境下，它指向window，node环境下它指向setTimeout

 5.通俗做法，将this在 setTimeout外部进行赋值保存

 6.箭头函数的出现，彻底解决this在内部的指向问题，直接指向我们所需要的

 7.箭头函数中this是最外层定义的函数绑定，不受内部影响

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