JavaScript中的this指向问题

ES6之前的function函数this的指向

// this谁调用我，this就指向谁

// 全局 (所有的全局变量都会被添加到Window对象的属性方法)
console.log(this)  // Window
function test() {
    console.log(this)
}
test()  // Window
window.test()  // Window

// 对象
let obj = {
    name:"Carl",
    test:function () {
        console.log(this)
    }
}
obj.test()  // obj

// setTimeout  setInterval
setTimeout(function () {
    console.log("111",this)
},2000)   // 111 Window

setInterval(function () {
    console.log("222",this)
},2000)   // 222 Window

// 事件绑定的this
// box.onclick = function () {
//     console.log(this)  // <div id="box">click</div>
// }

box.addEventListener("click",function (e) {
    console.log(e.target)    // <div id="box">click</div>
    console.log("addEventListener",this)  // addEventListener   <div id="box">click</div>
})

改变this的指向 apply call bind

// apply call bind
let obj1 = {
    name:"obj1",
    getName:function (a,b,c) {
        console.log("getName1",this.name)
        console.log(a,b,c)
    }
}
let obj2 = {
    name:"obj2",
    getName:function () {
        console.log("getName2",this.name)
    }
}
obj1.getName()  // getName obj1
obj2.getName()  // getName obj2

// call() ,并改变this执行为函数的第一个参数
// 支持多个参数
// 自动执行
obj1.getName.call(obj2,1,2,3)  // getName1 obj2

// apply() ,并改变this执行为函数的第一个参数
// 支持两个参数，第二个参数是一个数组
// 自动执行
obj1.getName.apply(obj2,[7,8,9])  // getName1 obj2

// bind()
// 改变this指向为函数的第一个参数，不会自动执行函数
console.log("=======bind========")
let fn = obj1.getName.bind(obj2)
fn(10,10,30)  // getName1 obj2 10 10 30

箭头函数中不绑定this对象