this关键字做了什么及使用场景？

this关键字做了什么？

1.全局环境输出this，指向谁？    方法中的this，指向调用方法的对象

2.全局函数输出this，指向谁？    全局环境下指向全局对象

3.对象的方法输出this，指向谁？全局函数中的this，指向全局对象。内部函数中的this，指向全局对象

4.DOM事件输出this。指向谁？  事件中的this，指向触发事件的DOM对象

5.构造函数中的this，指向谁？   构造函数中的this，指向new创建的对象【面试题new的作用】

6.new关键字做了什么？             箭头函数中的this，指向定义函数上下文的this。

7.箭头函数中this，指向谁？       使用闭包，var获取dom的索引。

使用场景

  // 1、直接输出this指向全局对象
  console.log(this);//输出window，script标签里面属于全局环境直接输出this指向window

// 2、放置、全局函数输出this指向全局对象
function fun() {
  console.log(this);//输出window
}
// window.fun()
fun()//缩写

// 3、this放在方法中,this指向调用这个方法的对象
let dog = {
  name: "旺旺",
  sayName() {
    console.log("我是" + this.name);//输出我是旺旺

  }
}
dog.sayName()

// 4、指向触发事件的DOM对象
const btn = document.querySelector("button");
btn.onclick = function () {
  console.log(this);
}

//5、构造函数、通常首字母大写。
function F() {
  console.log("我是构造函数");//输出我是构造函数
}
F()

// 6、加一个 new 用来创建对象
//new 关键字做了什么：new 会创建一个对象,将构造函数this指向创建出来的对象
function F() {
  // console.log("我是构造函数");
  this.name = "小明"//此时this指向小f
}
let f = new F()//加一个 new 用来创建对象
console.log(f);

//7、箭头函数三个说法
/*
  1.普通函数,谁调用指向谁。箭头函数，在哪里定义指向谁。
  2.箭头函数外指向谁就指向谁。//清爽
  3.箭头函数中没有this
*/
// 普通函数
let dog1 = {
  name: "旺旺",
  sayName() {
    setTimeout(function () {
      console.log(this);//输出window，计时器是一个全局的函数
    }, 1000)
  }
}
dog.sayName()

//箭头函数
let dog2 = {
  name: "旺旺",
  sayName() {
    setTimeout(() => {
      console.log(this);//输出旺旺
    }, 1000)
  }
}
dog.sayName()

总结

this是什么

this就是指当前函数的运行环境。由于js支持运行环境的动态切换，所以this的指向是动态的，所谓的运行环境其实就是对象。可以理解成，this函数运行时所在的那个对象

this指向

this作为普通函数调用 =>返回window、作为对象方法调用=>      返回对象本身、在class方法中调用=>     返回当前实例本身、使用call、apply、bind调用 =>传什么绑定什么（扩展：call、apply、bind具体指向及使用场景）