通俗易懂的this指向总结

Posted 云溪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通俗易懂的this指向总结相关的知识,希望对你有一定的参考价值。

this指向是工作和面试中经常会遇到的问题。

根据个人理解,简单从3个方面来总结一下this的指向问题。

1. this指向的结论

1. 若是全局函数,并且没有直接调用它的对象,没有严格模式,则默认指向全局 windowglobal
2. 若是全局函数,并且没有直接调用的对象,严格模式下,this指向undefined
3. 箭头函数的this,是在函数定义时根据上下文函数决定的。若是全局定义,则this指向windowglobal。若上下文有函数环境,则指向该上下文的this
4. 使用call改变this的指向取决于call的第一个参数,若第一个参数是null,还是会绑在全局的

2. 普通函数和箭头函数的this指向

结合下面的示例加深理解。

(1) 若是全局函数,并且没有直接调用它的对象,没有严格模式,则默认指向全局 window
function hello1(){
    console.log(\'我是hello1 this:\',this) // window
}
hello1() 
(2)若是全局函数,并且没有直接调用的对象,严格模式下,this指向undefined
function hello2(){
    \'use strike\';
    console.log(\'我是hello2 this:\',this) // undefined
}
hello2()  
(3)用obj直接调用hello3函数,则第一个this指向obj
setTimeOut里面的箭头函数,this指向obj
setTimeOut里面的匿名函数,this指向window
因为:箭头函数的this,是在定义箭头函数时根据上下文函数环境决定,该箭头函数定义在函数内部,上下文执行环境在hellow3函数内,所以指向hello3的this
var obj = {
    name:\'aaa\',
    hello3(){
        console.log(\'我是hello3 this:\',this); // obj
        setTimeout(()=>{
            console.log(\'我是hello3 里面箭头函数settimeout this:\',this); // obj
        },3000)

        setTimeout(function (param) {  
            console.log(\'我是hello3 里面匿名函数settimeout this:\',this); // window
        },2000)
    }
}

obj.hello3()
(4)hello4是普通函数,直接被obj调用,则this执行objhello5是箭头函数,this应该指向上限文函数中的this,这里上下文没有函数对象,所以默认为window
 var obj2 = {
    name:\'aaa\',
    hello4(){
        console.log(\'我是hello4 this:\',this); // obj
    },
    hello5:()=>{
        console.log(\'我是hello5 this:\',this);  // window
    },
}

obj2.hello4();
obj2.hello5();
(5)使用call 绑定this,取决于call的第一个参数,若第一个参数是null,还是会绑在全局的。
function foo(){
    console.log(this)
}

foo(); // global
foo.call(1); // [Number: 1]
foo.call({a:10},1); // { a: 10 }
1. foo.call(null,1); // global

以上是关于通俗易懂的this指向总结的主要内容,如果未能解决你的问题,请参考以下文章

const用法总结(通俗易懂)

通俗易懂的axios

torch.gather()之通俗易懂讲解

DHCP服务的八种报文类型(通俗易懂的总结)

通俗易懂了解Vue的计算属性

Go语言技巧之正确高效使用slice(听课笔记总结--简单易懂)