zoukankan      html  css  js  c++  java
  • JS中this指向问题

      1 //Javascript this 关键字
      2 /**
      3  * 面向对象语言中 this 表示当前对象的一个引用。
      4    但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
      5    1.在对象方法中, this 指向调用它所在方法的对象。
      6    2.单独使用 this,它指向全局(Global)对象。
      7    3.函数使用中,this 指向函数的所属者。
      8    4.严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。
      9    5.在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。
     10    6.apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。
     11  * */
     12 // 参考: https://www.runoob.com/js/js-this.html
     13 
     14 
     15 
     16    function a()
     17    {
     18       var num = 111;
     19       console.log(this.num);//undefined
     20       console.log(this);//Window
     21    }
     22    a();
     23    //调用函数 a(),实际上是 window.a(); 
     24    //实际调用者是window,this的指向也是window
     25 
     26    /**
     27     * this指向是obj,因为调用fun是通过obj.fun()来执行的。
     28     * 【this的指向不是创建的时候决定的,而是执行的时候决定的。谁去调用就指向谁】
     29     * */
     30    var obj = {
     31       num:111,
     32       fun:function()
     33       {
     34          console.log(this.num);//111
     35       }
     36    };
     37    obj.fun();
     38 
     39    var obj = {
     40       num:111,
     41       fun:function()
     42       {
     43          console.log(this.num);//111
     44       }
     45    };
     46    window.obj.fun();
     47 
     48    /**
     49     * 1.如果一个函数中有this,但是它没有被上一级调用,那么它就指向window (严格模式除外)  
     50     * 2.如果一个函数中有this,这个函数有被上一级调用,那么this的指向就是它的上一级的对象。
     51     * 3.如果一个函数中有this,【这个函数包含多个对象,尽管这个函数被最外层函数调用,this指向的也只是它上一级的对象】
     52     * */
     53    //EXP
     54    var obj = {
     55       a:10,
     56       b:{
     57          a:111,
     58          fun:function()
     59          {
     60             console.log(this.a);
     61          }
     62       }
     63    };
     64    obj.b.fun();//111
     65 
     66    var obj = {
     67       a:10,
     68       b:{
     69          // a:111,
     70          fun:function()
     71          {
     72             console.log(this.a);//undefined
     73             console.log(this);//window
     74          }
     75       }
     76    };
     77    var j = obj.b.fun;
     78    j();
     79    //【this永远指向像最后调用它的对象,也就是看它执行的时候谁调用的】
     80    //[虽然函数fun是被对象b引用,但将fun赋值给变量j的时候没有执行,所以最终指向的是window.]
     81    
     82 
     83 
     84    /**
     85     * 构造函数版this
     86     * */
     87    function fun()
     88    {
     89       this.user = "111";
     90    }
     91    var a = new fun();
     92    console.log(a.user);//111
     93    //【这里a之所以能点出函数fun里面的user,是因为new可以改变this的指向,将这个this指向对象a,为什么说是a对象,因为用了new关键字就是创建一个对象实例,这里用a创建了了一个fun的实例(相当于复制了一份fun到对象a里面.)此时仅仅是创建,并没有执行.而调用这个函数fun的是对象a,那么this指向的自然是对象a,那么为什么a中会有user,因为你已经复制了一份fun到对象a中,用了new关键字就等于复制了一份】
     94 
     95 
     96 
     97    /**
     98     * 当this遇到return
     99     * */
    100    //EXP
    101    function fun()
    102    {
    103       this.user = "111";
    104       return {};
    105    }
    106    var a = new fun;
    107    console.log(a.user);//undefined
    108 
    109    function fun()
    110    {
    111       this.user = "111";
    112       return function(){};
    113    }
    114    var a = new fun;
    115    console.log(a.user);//undefined
    116 
    117    //EXP2
    118    function fun()
    119    {
    120       this.user = "111";
    121       return 1;
    122    }
    123    var a = new fun;
    124    console.log(a.user);//111
    125 
    126    function fun()
    127    {
    128       this.user = "111";
    129       return undefined;
    130    }
    131    var a = new fun;
    132    console.log(a.user);//111
    133 
    134    //【如果返回值是一个对象,那么this指向的就是那个返回的对象.如果返回值不是一个对象,那么this还是指向函数的实例】
    135    function fun()
    136    {
    137       this.user = "111";
    138       return undefined;
    139    }
    140    var a = new fun;
    141    console.log(a);//fun {user: "111"}
    142 
    143 
    144 
    145    //一个特殊的对象null: 
    146    //虽然null也是对象,但是在这里this还是指向那个函数的实例
    147    function fun()
    148    {
    149       this.user = "111";
    150       return null;
    151    }
    152    var a = new fun;
    153    console.log(a.user);//111
    154 
    155 
    156 
    157    /**
    158     * 1.在严格版中默认的this不在是window,而是undefined。
    159     * 2.new 操作符会改变件数this的指向问题,
    160     * */
    161    function fun()
    162    {
    163       this.num = 111;
    164    }
    165    var a = new fun();
    166    console.log(a.num);//111
    167 
    168    //为什么this会指向a?,首先new关键字会创建一个空对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空对象代替.
    169    //注意: 当你new一个空对象的时候,js内部的实现并不一定是用的apply方法来改变this指向的,这里我只是打个比方而已.
    170   //if (this === 动态的可改变的) return true;
    171    //???
    172 
    173    //参考: https://www.cnblogs.com/pssp/p/5216085.html
  • 相关阅读:
    Git简介
    git 目录
    版本控制系统介绍
    python 爬虫 基于requests模块发起ajax的post请求
    python 爬虫 基于requests模块发起ajax的get请求
    POJ 2575
    POJ 2578
    POJ 2562
    POJ 2572
    POJ 2560
  • 原文地址:https://www.cnblogs.com/sener/p/13986402.html
Copyright © 2011-2022 走看看