this指向问题

函数的不同调用方式决定了this的指向不同

1:普通函数 this指向window

var a = 4;

function fn(){
    
  console.log("普通函数的this" + this);
}
// window.fn()
// console.log(window)

2:对象的方法 this指向的是对象o

var o = {
    
  sayHi:function(){
    
    console.log("对象的方法this" + this)
  }
}
// o.sayHi()

3:构造函数this指向 构造函数的实例对象

原型对象里面的this 指向的也是实例对象

function Star(){
    }
Star.prototype.sing = function(){
    }

var s = new Star()

4:绑定事件函数 this指向的是函数的调用者

var btn = document.querySelector('button');
btn.onclick = function(){
    
  console.log(this); // btn
 }

5:定时器函数 this指向的也是window

  window.setTimeout(function(){
    
     console.log(this,"定时器函数")//window
  },1000);

6:立即执行函数 this还是指向window

  (function() {
    
     console.log("立即执行函数" + this);//window
  })();

7:箭头函数 this指向的是箭头函数所在的环境的

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

var btn = document.querySelector('button');

btn.onclick = function(){
    
  window.setTimeout(()=>{
    
     console.log(this,"定时器函数")//btn
   },1000);
 }
btn.onclick = ()=>{
    
    console.log(this);//window
}

配合改变this指向食用