欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6箭头函数与this指向

程序员文章站 2024-01-30 11:03:58
...

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));

ES6箭头函数与this指向

函数中的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()
    
  • 结果:

ES6箭头函数与this指向

相关标签: JS知识点