【前端面试】对JavaScript中this的理解总结

àì夳堔傛蜴生んèń 2022-04-13 14:23 267阅读 0赞

setTimeout、setInterval中的this，严格模式和非严格模式下的this，箭头函数中的this，函数独立调用中的this

## 1.setTimeout、setInterval中的this ##

从上述例子中可以看到setTimeout,setInterval中函数内的this是指向了window对象，这是由于setTimeout()，setInterval()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

## 2.严格模式下的this ##

###### （1）全局作用域中的this ######

"use strict"
    console.log("this === window",this === window);   //true

在严格模式下的全局作用域中 `this` 指向`window`对象

##### （2）全局作用域中函数中的this #####

"use strict"
    function fn(){
        console.log('fn的this:'+this);
        function fn2(){
            console.log('fn2的this:'+this);
        }
        fn2();    
    }
    fn();
    // fn的this:undefined
    // fn2的this:undefined

严格模式下： 在全局作用域中函数的 `this` 指向 `undefined`

##### （3）对象的方法中的this #####

"use strict"
    let name = 'zhaosi';
    let obj = {
        name: 'liuneng',
        fn:function(){
            console.log(this.name)
            console.log(this);
        }
    }
    obj.fn();
    //  liuneng
    // {name: "liuneng", fn: ƒ}

严格模式下，对象的函数中的this指向该对象

##### （4）构造函数中的this #####

"use strict"
    function Person( name){
        this.name = name;
        this.say = function(){
            console.log('my name is:'+this.name);
            console.log(this);
        }
    }
    var lzx = new Person('lzx');
    lzx.say();  
    //my name is lzx
    //Person { name:"lzx", say:f }

严格模式下，构造函数中的`this`指向`new`出来的对象

##### （5）事件处理函数中的this #####

"use strict"
    var oBtn = document.getElementById("btn");
    oBtn.onclick = fn;
    function fn(){
        console.log(this);
    }
    //<button id="btn">点击</button>

## 3.箭头函数中的this ##

首先，箭头函数没有自己的`this`，箭头函数中的`this`是在定义函数的时候绑定，它会捕获其所在的上下文的`this`作为自己的`this`，而不像普通函数那样是在执行函数的时候绑定。

var a = 10;
    var obj = {
        a: 99,
        fn1:()=>{ console.log(this.a) },
        fn2:function(){ console.log(this.a) }
    }
    obj.fn1(); //10
    obj.fn2(); //99

箭头函数`this`指向它定义时的上下文（在这里是window），而普通函数的`this`则指向调用它的对象