秒懂Javascript中的this指向

javascript this

很多初入前端行业的程序员,对于JS中的this指向问题是一知半解,往往需要靠自己的猜测或者在控制台里打印去判断,然而这样久了,对于this的指向问题还是模糊不清。本篇文章将会用最通俗易懂的语言告诉你,如何去深刻理解它。

大多数人的认知:

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

以上这句话并没有错,但是并不完整。我们接着往下看…

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

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

 例3:  
        var name ="jack" ;
        var person = {
            name:"newArray8888",
            say:function(){
                console.log(this.name);  
        }
    }
    window.person.say();//newArray8888
    
    从这个例子可以看出,如果按照上面认知的推论话,这里的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指向的认知是错误的。其实并不是,只是不够准确而已。以下三条补充
  • 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
  • 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
  • 如果一个函数中有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 = "newArray8888";
       return {};
     }
   var example = new Factory();
   console.log(example.name)//undefined
   
   例7:
   
    function Factory(){
       this.name = "newArray8888";
       return funciton(){};
     }
   var example = new Factory();
   console.log(example.name)//undefined
   
   例8:
   
     function Factory(){
       this.name = "newArray8888";
       return 1;
     }
   var example = new Factory();
   console.log(example.name)//newArray8888
   
   例9:
   
    function Factory(){
       this.name = "newArray8888";
       return undefined;
     }
   var example = new Factory();
   console.log(example.name)//newArray8888
   
   由以上四个例子我们可以看出,如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。但是又有一个特殊的,即返回null。
   例10:
   
   function Factory(){
       this.name = "newArray8888";
       return null;
     }
   var example = new Factory();
   console.log(example.name)//newArray8888
   虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

对于this的理解,是javascript中的一个重点和难点,所以需要我们驾驭。如果这篇文章让你重识this,并且有所收获的话。双击一波666。

    原文作者:newArray
    原文地址: https://www.jianshu.com/p/c1f243d1db09
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞