浅显易懂之this指向

前言

对于前端开发er,往往在学习javascript的时候，会遇到一些疑惑点。这些疑惑点往往集中在以下一些方面。

this指向
原型
闭包
...

不要害怕，每个人刚开始接触一样东西的时候，都会遇到一些困惑。

成长的过程，无疑就是发现问题，进而解决问题，最后总结问题。

今天想给大家分享下javascript中关于this指向的那些事。

相信看完之后，你一定会受益匪浅。

正文

大多数人的认知：

javascript中的this指向,在函数定义的时候，是无法确定的，只有函数执行时才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

以上这句话并没有错，但是表述的并不完整。我们接着往下看...

 例1:  
    function example(){
        var gun = "kar98k";
        console.log(this.gun); //undefined
        console.log(this); //Window
     }
     
    example();
    
    我们上面说只有在函数执行的时候，才能去判断它(this)最终指向的调用它的对象。我们要明确一点，函数与变量的定义，都是被添加进window的属性的。这里我们的example函数，是等同于window.exapmle的。所以函数是由window对象调用的，所以自然指向window，然而在window的属性中，并没有gun这个变量，所以结果为undefined。
    
    上面的代码等同于以下代码：
    function example(){
        var gun = "kar98k";
        console.log(this.gun); //undefined
        console.log(this); //Window
     }
    window.example();

例2:
    var person = {
        name:"newArray",
        say:function(){
            console.log(this.name);//newArray
        }
    }
    person.say();
    
    这里的say方法是定义在对象person上面的，调用该方法的时候，也是通过person.say调用的，所以这里的this自然指向person,而person里面是有一个name属性值的，所以结果为newArray。

以上两个例子是符合上述的认知的，即this指向调用它的对象。然而上面的认知是不完整的。我们接着往下看...

 例3:  
        var name ="jack" ;
        var person = {
            name:"newArray",
            say:function(){
                console.log(this.name);  
        }
    }
    window.person.say();//newArray
    
    从这个例子可以看出，如果按照上面认知的推论话，这里的this最终应该指向window，结果为jack才对。接着看下面这个例子
    
    var example= {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a);
            }
        }
}
    example.b.fn(); //12
    如果根据上面的推断的话，这里的this应该指向example才对，this.a结果应该为10才对。这样看来，可能你会觉得开头对于this指向的认知是错误的。其实并不是，只是不够准确而已。补充以下三条，基本就完善了。

1.如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。
2.如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
3.如果一个函数中有this，这个函数中被多个对象包含，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例3可以证明。

接着往下看...

例4:    
    var example= {
        a:10,
        b:{
            //a:12,
            fn:function(){
                console.log(this.a);
            }
        }
    }
    example.b.fn(); //undefined
    这里fn函数被多个对象包含(window、example、b),但是最终调用它的是它的上一级对象，也就是b对象，然而b对象中对于a属性的定义是没有的，所以自然是undefined，即使example对象中拥有该属性a=10,它也是访问不到的。

还有下面这个更加迷惑人的...

    例5:
    var example= {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a);
            }
        }
    }
    var other = example.b.fn;
    other()//undefined
    
    这里我们将函数的定义赋给oher这个变量，最终函数执行时，是被window对象调用的，即等于window.other(),在window对象中并没有对于a的定义，所以为undefined。

当函数内部有返回值时，即this碰到return时，又会有些许的区别,接着看...

    例6:
    
    function Factory(){
       this.name = "newArray";
       return {};
     }
   var example = new Factory();
   console.log(example.name)//undefined
   
   例7:
   
    function Factory(){
       this.name = "newArray";
       return funciton(){};
     }
   var example = new Factory();
   console.log(example.name)//undefined
   
   例8:
   
     function Factory(){
       this.name = "newArray";
       return 1;
     }
   var example = new Factory();
   console.log(example.name)//newArray
   
   例9:
   
    function Factory(){
       this.name = "newArray";
       return undefined;
     }
   var example = new Factory();
   console.log(example.name)//newArray
   
由以上四个例子我们可以看出，如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。但是又有一个特殊的，即返回null。
   例10:
   
   function Factory(){
       this.name = "newArray";
       return null;
     }
   var example = new Factory();
   console.log(example.name)//newArray
   
虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

总结

this指向，应该是在面试的时候，经常被问的一个问题。而很多小伙伴在被问到时，往往头变大了。如果你不想成为大头娃娃，那么就认真的去理解它，搞定它吧。

欢迎小伙伴们提出自己的见解，并且指出文中的错误😊

If this article has give you some help . why don't give me a star✨！

传送门:个人博客