javascript之this详解(秒懂)

this关键字

每个函数都有一个关键字叫this，在不同的情况下，this代表的内容也是不同的

1. 普通函数中的this代表window对象

function fn(){
   console.log(this);
}
fn(); // window

2.定时器中的this代表window对象

let obj={
        run:()=>{
            setTimeout(()=>console.log(this))
        }
    }
    obj.run();//window

3.自调用函数中的this代表window对象

function fn(){

       (function(){
           console.log(this);
           
       })();
    }
    fn()

4.对象方法中的this代表调用这个方法的对象

let obj={
        name:"dog",
        run:function(){
            console.log(this)
        }
    }
    obj.run();

5.事件函数中的this代表当前事件的事件源

document.querySelector("button").onclick=function(){
   console.log(this);
}
// <button>按钮</button>

6.箭头函数的this在定义箭头函数就知道了，代表上一层代码的this

document.querySelector("button").onclick=function(){
   // 这里的this代表button按钮，所以箭头函数的this也是button按钮
   setTimeout(()=>{console.log(this);});
}
// <button>按钮</button>

总结：函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系。箭头函数在定义的时候this代表上一层代码的this