this关键字用法详解

this关键字的使用方法

1.全局环境输出this，指向谁？

直接输出this指向全局对象

  console.log(this) // 全局window

2.全局环境输出this，指向谁？

全局函数其实就是window（全局对象）的方法

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

3.对象的方法输出this，指向谁？

this放在方法中，this指向调用这个方法的对象

   let cat = {
      name:"喵喵",
      sayName(){
          console.log("我是" + this.name)
      }
  }
  cat.sayName()  // 我是喵喵

4.Dom事件输出this，指向谁？

this放在dom事件中，this指向的是dom对象

<button>按钮</button>

  let btn = document.querySelector("button")
  btn.onclick = function () {
      console.log(this)
  }

5.构造函数中的this，指向谁？

构造函数是用来创建对象的，就相当于f

  function F(){
      this.name = "小明"
      console.log(this)
  }

  let f = new F()
  console.log(f)

6.new关键字做了什么？

new会创建对象，将构造函数中的this指向创建出来的对象

7.箭头函数中的this，指向谁？

1. 普通函数，谁调用指向谁，箭头函数在哪里定义指向谁
2. 箭头函数外指向谁就指向谁
3. 箭头函数中没有this
   三种说法

  let cat1 = {
    name: "喵喵",
    sayName(){
      setTimeout(() => {
        console.log(this.name)  // 喵喵
      },1000)
    }
  }
  cat1.sayName()