• 如何更好的理解js中的this,分享2段有意思的代码


    关于js中this的浅析,大家可以点击【彻底理解js中this的指向,不必硬背】这篇博客了解。

    今天遇到2段比较有意思的代码。

    ----------------第一段--------------------

    function a(xx){this.x=xx;return this};
    var x=a(5);var y=a(6);
    console.log(x.x); 
    console.log(y.x); 
    

    输出:

    undefined  //console.log(x.x)
    6          //console.log(y.x)
    

    Why?

    其实这段代码还是比较有误导性的,我们来简化并且分解一下,简化后如下。

    function a(xx){
      this.x = xx;
      return this;
    }
    
    var x = a(5);
    console.log(x.x);
    

      我们主要分析一下 var x = a(5) 调用a函数时发生了什么。

      由于在window层面下,我们可以这样改写这句。  

    window.x = window.a(5); //这句等同于 var x = a(5);
    

      1、我们先看等号【右侧 var x = a(5)】部分,也就是执行a(5)这个函数的时候发生了什么,因为其在window层面下,你可以理解为 window.a(5),基于javascript中关于this的理解,【谁调用该函数,里面的this指向谁】,

      那么在这里,很显然,是window调用了函数a,里面的this当然指向window。

      在函数执行时第1句: this.x = xx; //由于传入的值是常数5,那么this.x=5,没有问题吧; ok,进一步,this指向是谁呢,谁调用的该函数,this就是谁,那么在这里显然

                                  是window调用的函数a,那么this指向的就是window,于是我们可以这样写,window.x = 5   请注意,这里很重要,此时此刻window.x=5, 表明window层下面有一个x属性,并且值为常数5;

      在函数执行时第2句:return this;  // this同样指向的是window, 所以返回window

      a(5)执行完毕,返回window;

     2、接着看等号【左侧 var x = a(5)】部分,也就是var x,也就是说我们在window层面下申明一个名为x的变量;  前面第一句【this.x=xx】执行完毕,已经在window下面产生了一个属性x,也就是上面红色部分 window.x

         而现在我们又在window层面下申请一个变量x ,显然后面这个申明的x会覆盖掉第一句在【this.x】产生的window.x

    最终:a(5)执行完毕,返回window对象,并赋值给变量x,那么在console.log(x.x) 输出window

    问题来了,不是说输出undefined吗?现在我们整段一起看。

    function a(xx){
       this.x=xx;
       return this
    };
    
    var x=a(5);
    //console.log(x.x) 如果此时我们作输出,没错,得到的就是window。问题在下面这一句
    var y=a(6);  //调用函数a(6) 会造成 window.x =6  再么接下来再输出console.log(x.x), 由于x=6 ; console.log(6.x)肯定是无效的,因此为undefined
    console.log(x.x); // undefined
    console.log(y.x); // 6
    

        

    总结:

    定义的a方法,直接调用this对象指向的是window全局变量。在x=a(5)时,this.x就是window.x得到的是5,后来x接到了返回值是window.

    这一点你可以把y=a(6)注释掉执行看到!然后再调用y=a(6),这时候this.x把之前的x改写成6,成了一个数值型的变量了。

    这时候y接到了返回的window,x.x不存在,y.x就是被改写的那个6了!

    ----------------第二段--------------------

    var obj = {
      go: function() { console.log(this) }
    };
    (0 || obj.go)()  //这里为什么输出window 啊

     分解上面的代码:

       obj.go = function() { console.log(this) }

    (0 || obj.go)() 这句,我们可以写成 (0 || function() { alert(this) })()

    这样看起来就简单多了

        ( 0 || function() { console.log(this) } )()  自执行函数,我们先看扣号中红色部分,执行后返回什么呢?

    大家控制台中可以测试一把,执行后返回函数  function() { alert(this) }

    因此代码如下,一个妥妥的自执行函数

    (function() { alert(this) })()

    谁调用该函数,里面的this指向谁,这里是在最外层执行,也就是window调用了该函数,因此输出window

     

  • 相关阅读:
    python基础之面向对象OOP
    python基础之多线程的操作
    python基础之文件的读取
    Oracle SQL Developer查询结果生成(导出)SQL文件/语句
    Oracle某条资料被锁如何解锁 (ScriptRunner,v$locked_object,SID和SERIAL#)
    一行代码可以做什么?
    Linux命令后面加 & 的作用
    使用Putty + Xming 远程登录Linux显示图形化界面
    Oracle ROWNUM用法
    oracle实现分页功能 limit功能例子
  • 原文地址:https://www.cnblogs.com/event/p/5478061.html
Copyright © 2020-2023  润新知