关于this指向问题

一.this指向的具体场景

1. 描述：指向当前对象的调用者
2. 指向：
   • 在html中：指向window
   • 在DOM0事件：指向绑定事件的对象
   • 在DOM2事件：指向绑定事件的对象
   • 对象方法调用：指向该方法所属的对象
   • 间隔调用 （setInterval）和延迟调用（setTimeout）指向window对象
   • call/apply/bind: 第一个参数是什么就指向什么，如果是null就代表指向window
   • 闭包：指向window
   • 自执行函数：指向window
   • 构造函数中：指向实例对象
   • 箭头函数：本身不会创建自己的this指向外层作用域中的this

二.具体说明

1. 在html中

<div id="box">点击我</div>
<script>
	console.log(this)   // Window
	const btn = document.getElementById('btn')
    btn.onclick = function(){
    	console.log(this);  // <div id="box">点击我</div>
    } 
</script>

2. 在DOM0和DOM2事件中

<div id="box">点击我</div>
<script>
	const btn = document.getElementById('btn')
	// DOM0事件
    btn.onclick = function(){
    	console.log(this);  // <div id="box">点击我</div>
    } 
    
    // DOM2事件
    btn.addEventListener('click',function(){
       console.log(this,'点击了我们');   // <div id="box">点击我</div>
    },false);  // 默认是false代表事件冒泡
</script>

3. 对象方法调用

console.log(this)   // Window
const obj = {
   num: 100,
   fn: function () {
      console.log(this.num); 
   }
}
obj.fn()  // 100,this指向obj这个对象

4. 间隔调用 （setInterval）和延迟调用（setTimeout）

// 延迟调用
setTimeout(()=>{
    console.log(this);    // Window
},1000)

// 间隔调用
setInterval(()=>{
    console.log(this);   // Window
},1000)

5. call/apply/bind()

const obj = {
   name: 'wangtongtong',
   fn: function (age) {
      console.log(this.name + ':' + age); 
   }
}
const obj1 = {
	name: 'wangjiajia'
}
obj.fn(16)   // wangtongtong:16,this指向obj这个对象
obj.fn.apply(obj1,[24])  // wangjiajia:24,apply改变了this的指向
obj.fn.call(obj1,24)   // wangjiajia:24,call改变了this的指向
obj.fn.bind(obj1,24)()    // wangjiajia:24,call改变了this的指向

6. 闭包

function fun1(){
    function fun2(){
        console.log(this);
    }
    return fun2()
}
fun1()    // Window

7. 自执行函数

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

8. 构造函数

function Person(age, name) {
   this.age = age;
   this.name = name
   console.log(this)  // 此处 this 指向 Person 的实例对象 p1 
 }
const p1 = new Person(24, 'wangjiajia')
p1.age     // 24
p1.name    // wangjiajia

9. 箭头函数

var obj = {
  foo() {
    console.log(this);
  },
  bar: () => {
    console.log(this);
  }
}
 
obj.foo() // {foo: ƒ, bar: ƒ}
obj.bar() // window  bar是一个箭头函数，本身没有this,沿着自己的作用域链继承上一层的this,在这里是Window。