JS中this的五种情况总结

什么是this

this不是执行上下文（EC才是执行上下文），this是执行主体

• this，在全局上下文下，this指向window
• 块级上下文中没有自己的this，它的this是继承所在上下文中的this
• 函数的私有上下文中，this的情况会多种多样

私有上下文中的this

1. 事件绑定中，给元素的某个事件行为绑定方法，当事件行为触发，方法执行，方法中的this是当前元素本身（特殊：IE6~8中基于attachEvent()方法实现的DOM2事件绑定，事件触发，方法中的this是window而不是元素本身）

let body = document.body
body.onclick = function () {
    console.log(this) // body
}
body.addEventListener('click', function () {
    console.log(this) // body
})
body.attachEvent('onclick', function () {
    console.log(this) // window
})

2. 普通方法执行（包括自执行函数执行、普通函数执行、对象成员访问要调取方法执行等），只需要看函数执行的时候，方法名前面是否有“点”，有“点”，“点”前面是谁，this就是谁，没有“点”，this就是window[非严格模式]/undefined[严格模式]

let obj = {
    fn: (function () {
        console.log(this) // window
        return function () {}
    })()
}

function func () {
    console.log(this)
}
let obj = {
    func
}
func() // window
obj.func() // obj

[].slice() // 数组实例基于原型链机制，找到Array原型上的slice方法，然后再把slice方法执行，此时slice方法中的this是当前的空数组
[].prototype.slice() // 此时this是Array.prototype

3. 构造函数执行（new），构造函数体中的this是当前类的实例。而原型上方法中的this不一定都是实例，主要看执行的时候，“点”前面的内容（同第二点）

function Func () {
    this.name = 'F'
    console.log(this)
}
Func.prototype.getNum = function getNum () {
    console.log(this)
}
let f = new Func() // Func {name: "F"}
f.getNum() // Func {name: "F"}
Func.prototype.getNum() // {getNum: ƒ, constructor: ƒ}

4. ES6中提供了Arrow Function（箭头函数）：箭头函数没有自己的this，它的this是继承所在上下文中的this

let obj = {
    func: function () {
        console.log(this) // obj
    },
    sum: () => {
        console.log(this) // window，块级上下文中没有自己的this
    }
}

5. 可以基于call/apply/bind方式，强制手动改变函数中this的指向