this："我是谁，我在哪，我该干什么？" 教你更快的理解this的指向问题

代码钢琴家
202 阅读3分钟

各位是否经常会因为找不到this的指向而苦恼呢,看了我的文章之后假如对你们得理解有帮助的话,那就非常感谢各位读者能够看完,假如有说错的地方也欢迎各位业界大佬指出2.好话不多说开始,首先我们来读这么一句话。this永远指向最后调用它的那个对象。好从这里开始你已经学会了。^_^哈哈。

1.首先我们来看案例一

   <script>
        console.log(this);
    </script>

打印结果:

image.png

相信这个结构大家都知道,在全局环境下,他指向window。学习是循序渐进的嘛,接下来我们再看案例2

2.案例二

 var name = 'Jay'
   function fn(){
      let name = 'JayChou'
          console.log(this.name);
      }
    fn()

打印结果

image.png

可能会有人疑惑了，为什么我在函数内部打印的结果,不应该是JayChou吗，怎么变成了全局的那个name呢，其实我们再来读一遍刚刚说的话，this永远指向最后调用它的那个函数 ，我们在调用函数 fn() 的时候实际上是在全局调用他，简写为了window.fn() 所以我们依然是在全局调用的这个函数。全局下有name这个属性自然就打印JayChou啦，好，我们继续。

3.案例三

var name = 'Jay'
     var JayChou = {
         name:'哎呦不错哦',
           fn:function(){
              console.log(this.name);
            }
        }
      JayChou.fn()

打印结果

image.png

因为在对象里面有个fn() 函数,且我们在调用的时候通过 JayChou 调用，所以在最终this指向该对象 好,我们在这里做个微微的改变

4.案例四

       var name = 'Jay'

        var JayChou = {
            name:'哎呦不错哦',
            fn:function(){
                console.log(this.name);
            }
        }
      
        window.JayChou.fn()

打印结果

image.png

回到我们刚刚提到的一句话this永远指向最后调用它的那个对象，因为我们在全局环境下创建了一个 JayChou对象,而在该对象下有一个函数名为 fn() 的函数，最终我们还是由 JayChou 调用，所以执行的是对象内部的值。讲到这里你是不是通透了很多呢?我们对这个案例在进行改动

5.案例五

    var name = 'Jay'

        var JayChou = {
            // name:'哎呦不错哦',
            fn:function(){
                console.log(this.name);
            }
        }
      
        window.JayChou.fn()

打印结果

image.png

出乎意料的结果,为什么是undefined的不是jay呢，原因是因为我们在调用函数是在对象的基础上调用,但是在对象里面我们并没有找到 name这个属性,所以他执行的结果就是undefined。

  1. 接下来我们看一道陷阱题
    var name = 'Jay'
       var JayChou = {
           name:'哎呦不错哦',
            fn:function(){
                console.log(this.name);
            }
        }
      var a = JayChou.fn
      a();

打印结果

image.png

能看到这里一下子理解过来的同学，说明你已经会了，不理解的也没关系,我讲一下你一样也会明白，因为我们首先并没有调用函数，我们只是把他赋值给了全局的变量 a 让他去调用。所以我们是在window下调用的这个函数。

7.最后我们再来看最后一个案例

var name = "Jay";

function fn() {
    var name = 'Jaychou';
    sss();
    function sss() {
        console.log(this.name);      
    }
}

fn()

打印结果

image.png

现在能看明白了吧，即使说我在函数内部调用的另外一个函数，但是首先我在调用第一个函数的时候一样一样是在全局的环境下去调用的所以,指向依然是window,最后的最后然我们在大声的朗读一遍this永远指向最后调用它的那个对象。(#^.^#)希望可以帮到你们，还有不明白的可以底下留言评论。也欢迎业界各位大佬莅临指导补充。

avatar
文章
阅读
粉丝