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