欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中的this指向

程序员文章站 2022-07-07 18:14:15
...

      在工作过程当中,我们经常会碰到有关于this这个关键字,尤其是在封装插件的时候,如果对于this的指代不理解或者一知半解,就会导致我们项目中,后续出现各种各样的问题,下面就说说我自己对于this关键字的理解

       关于this的指向,我们始终记住一句话,那就是“this的指向,在函数定义的时候是确定不了的,只有在函数调用的时候,我们才能知道this指向”;如何理解这句话呢?如下所示:

        function  A(){

             var  name="hello";

              this.age=12;

              console.log(this.age);

         };

         A(); //12;

      在上面这个例子中,函数执行完后,会打印出12;因为此时定义的函数A是在window作用域下定义的,所以在执行A的时候,我们可以理解成此时是window调用了A函数,所以在非严格状态下,此时的this指向的是window;

       再来看一个例子:

        var name="haimei"

        var  object={

            name:"lilei",

            getName:function(){

                 console.log(this.name);

           }

        };

        object.getName();//lilei;

   上述这个例子中,函数getName()被object调用的,所以在执行函数的时候,会打印出"lilei";

    我们再来看一个例子:

     var name="haimei"

        var  object={

            name:"lilei",

            people:{

                 name:"tom",

                 getName:function(){

                       console.log(this.name);

                  }

            }

        };

        object.people.getName(); //   ?

        各位看官可以想想这个时候,打印出来的会是什么?

         在上面这个例子中,最终打印出来的会是tom;

         先简单总结一下:

              1:如果在一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window;

              2:如果一个函数中有this,这个函数被上级对象所调用,那么this指向的就是上级对象;

              3:如果一个函数中有this,这个函数是被多个对象所包裹的(即:这个函数的父级是一个对象,它的父级的父级也是一个对象,依次类推,即使这个函数被父级对象的父级对象........所包裹);在调用的时候,尽管这个函数是被最外层的对象所调用,函数中的this指向的也只是它的父级对象;

 

        二:当碰到的this在构造函数里面时的情况:

             function  Fn(){

                 this.name="瞎搞"

             };

             var  user=new  Fn();

              console.log(user.name);    //瞎搞

              这里之所以能够通过实例化的对象来调用name属性,这是因为new  关键字改变了this的指向;此时的this指向的是实例化出来的user对象;

        三:当有this的函数中有return 关键词的时;

            function  Fn(){

                  this.name="瞎搞";

                  return  {name:"瞎说"}

             };

            var   obj=new  Fn();

            console.log(obj.name);  //瞎说;

            function  Fn(){

                  this.name="瞎搞";

                  return  {}

             };

            var   obj=new  Fn();

            console.log(obj.name);  //undefined;

            function  Fn(){

                  this.name="瞎搞";

                  return 1;

             };

            var   obj=new  Fn();

            console.log(obj.name);  //瞎搞;

            function  Fn(){

                  this.name="瞎搞";

                  return null;

             };

            var   obj=new  Fn();

            console.log(obj.name);  //瞎搞;

       在上述三个例子中,不知道各位有没有看出来什么;

              从上述例子中,我们可以明显的知道,在一个有this的函数中,如果有return 关键字,且返回的是一个对象,那么this指向的就是返回的那个对象,也行有人会说最后一个例子中,返回的是一个null,在js里面,null也是对象,那为什么最后调用name属性的时候,也会输出“瞎搞”,这里麻烦大家记住,对于返回值为null的this也是指向通过函数实例化的那个对象;

             而如果返回的不是一个对象,而是一个非引用类型的,this指向的也是通过函数实例化出来的对象;             ,即.return的是五种简单数据类型:String,              Number,Boolean,Null,Undefined,这种情况下,忽视return值,依然返回this对象。

 

       如有错误的地方,欢迎各位指正

相关标签: this指向性