JavaScript的this指向详解

一、概念：

• 函数的上下文（this）由调用函数的方式决定，function是“运行时上下文”策略；

• 函数如果不调用，则不能确定函数的上下文。

二、规则：

• 对象打点调用它的方法函数，则函数的上下文是这个打点的对象

var name = '小红'
const people = {
    name:'小明',
    age:12,
    sayHello(){
        console.log(this.name);
    }
}
people.sayHello();// "小明"

•  圆括号直接调用函数，则函数的上下文是window对象

var name = "老六"
function winDow(){
    let name = "铁蛋"
    console.log(this.name);
}
winDow();//老六

• 数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）

const arr = ['a',0,'b',1,function(){console.log(this[0])}];
 arr[4]();//a

• IIFE(自调用)中的函数，上下文是window对象

var name = "李白"
(function(){
    let name = '王麻子'
    console.log(this.name)// 李白
})()

• 定时器、延时器调用函数，上下文是window对象

var name = "王五"
const xiaoHong = {
    name:'小栗子',
    age:18,
    fun(){
        setTimeout(function(){
            console.log(this.name)
        },1000)
    }
}
xiaoHong.fun();//王五

• 事件处理函数的上下文，是绑定事件的DOM元素

// html部分
<p>我是狗蛋</p>
// js部分
const domP = document.querySelector('p');
domP.onclick = function(){
    console.log(this.innerText);//点击时，控制台打印：我是狗蛋
}