ES6箭头函数与this指向

ES6箭头函数与this指向

普通函数

一般形式

function AAA() {
    console.log('function');
  }

匿名函数

 const BBB = function () {
    console.log('function');
  }

面向对象字面量函数

const obj = {
//普通写法
    CCC: function (){
      console.log('function');
    },
//ES6写法
    DDD(){
      console.log('function');
    }
  }

箭头函数

普通写法

const EEE = ()=>{
    console.log('function');
  }

当函数内容只有一条语句时

  const FFF = ()=> console.log('function');

• 函数内容只有一条语句时，会自动return

const GGG = (num1,num2) => num1*num2;
console.log(GGG(10,5));

函数中的this指向

• 在一般函数中，this指向实际调用该函数的对象

• 在箭头函数中，是向外层作用域中，一层层地查找this

  const obj2 = {
      HHH() {
        setTimeout(function () {
          console.dir(this);//window
        })
  
        setTimeout(()=>{
          console.dir(this);//obj2对象
        })
  
        setTimeout(function(){
          setTimeout(()=>{
            console.dir(this);//window
          })
        })
  
        setTimeout(()=>{
          setTimeout(()=>{
            console.dir(this);//obj2对象
          })
        })
      }
    }
    obj2.HHH()
  

• 结果：