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
原文地址:https://www.cnblogs.com/sener/p/13986402.html