辉太郎看前端(js中的this指向问题)

前言

在使用函数时，我们通常会把this指向弄不清除，今天就一起来看看吧！

this出现的情况

• 普通函数中的this指向。
• 箭头函数中的this指向。
• class声明的函数中this的指向。
• 通过call(),apply(),bind()改变后的this指向
• 在对象中调用函数时的this指向。

案例

    //普通函数
 function fn(){
  console.log(this) //指向window
  }
  fn()



   //class函数
class Prom {
    constructor(name) {
      this.name = name
    }
    say() {
      console.log(this)// this指向实例本身
    }
  }
  var zhang = new Prom('hui') 
  zhang.say()



  //计时器中的函数为普通函数时的this
class Prom {
    constructor(name) {
      this.name = name
    }
    say() {
      setTimeout(function(){
        console.log(this)// this指向window
      })
    }
  }
  var zhang = new Prom('hui') 
  zhang.say()

  //计时器中的函数为箭头函数时的this
class Prom {
    constructor(name) {
      this.name = name
    }
    say() {
      setTimeout(()=>{
        console.log(this) //this指向实例本身
      })
    }
  }
  var zhang = new Prom('hui') 
  zhang.say()

• 在普通函数中this指向window，通过call()，apply()，bind()可以修改this指向。
• 在箭头函数中this指向父级的上下文，通过call()，apply()，bind()无法修改this指向。
• 在class定义的函数中this指向实例本身。
• 在对象中调用函数时，谁调用this就指向谁。
• 在计时器的回调函数中，当函数为普通函数时，this指向window；当函数为箭头函数时，this指向实例本身。

自由变量

在当前作用域中使用了变量，却未定义会向上级作用域查找，找到window还没有找到，则报错。

总结

初出茅庐，请各位大佬多多指教🙂！