this的指向问题

function函数的this指向

JavaScript中的this实际上代指了当前对象

所以简单的说 : this就指向了它的调用者对象

谁调用了this , this就指向谁 , 但是这种说法很模糊 , 比如如下代码

const obj = {
    fn() {
        function fn2(){
            console.log(this)
        }
        fn2()
    }
}
obj.fn()  //Window

这个代码看上去是obj在调用this , 但是this指向了Window

没人调用this的时候this才会指向Window

所以正确的说法是 : this指向所在函数的直属对象

上面代码中this是fn2的this , fn2没有所在对象 , 直属的是个函数

所以没有人调用fn2 , 它只是在fn里面执行了 , this自然就指向Window

箭头函数的this指向

箭头函数的this指向箭头函数定义时所在function函数的this , 如果没有就指向Window

代码如下

const obj = {
    fn : ()=>{
       console.log(this)
    }
}
obj.fn()  //Window

最后输出的不是obj , 而是Window

下面是所在的是function函数的情况

const obj = {
    fn() {
        fn2 = ()=>{
            console.log(this === obj)
        }
        fn2()
    }
}
obj.fn() //true

上面的代码中fn2是箭头函数 , fn是function函数

fn的this指向的是obj , 所以fn2的this指向的也是obj

如果是多层的箭头函数嵌套 , 那么这些箭头函数会一直往上继承所在function函数的this

const obj = {
    fn() {
        let then = this
        fn2 = ()=>{
            fn3 = ()=>{
                console.log(this === then)
            }
            fn3()
        }
        fn2()
    }
}
obj.fn()  //true

以上代码中then代表了fn的this , fn2和fn3都是箭头函数 , 所以fn3的this继承自fn的this

但是如果fn2不是箭头函数 , 那么就继承自fn2的this

const obj = {
    fn() {
        function fn2(){
            let then = this
            fn3 = ()=>{
                console.log(this === then)
                console.log(this)
            }
            fn3()
        }
        fn2()
    }
}
obj.fn()  //true
          //Window

fn2是没人调用的 , 所以this就指向Window

JavaScript中还提供了3个用于改变this指向的api

分别是call , apply , bind

const obj = {
    name : 'obj1',
    fn(age, gender){
        console.log(this.name, age, gender)
    }
}
const obj2 = {
    name : 'obj2'
}
obj.fn.call(obj2, 18 ,'男')  //obj2 18 男

第一个参数是要指向的对象 , 第二个开始就是该函数所传的参数

apply , bind的用法和call差不多 , 只是传参方式不同

obj.fn.apply(obj2,[18 ,'男'])  //apply
obj.fn.bind(obj2)(18,'男')  //bind