JavaScript裡的小妖精

標籤：this   吐槽   賦值   define   一起學前端   筆試   cal   模式   存在   

JavaScript裡的小妖精———this！！

關於this指向這個問題，活生生折磨了我一個下午，回來靜下心捋順一下，總結出來一下規律。

當然，this這個複雜的問題不是一句兩句可以說清楚，作為菜鳥，我的總結也就是為了做一些 ‘坑人的’ 筆試題，所以只能歡迎吐槽了。

題中一般分為兩種情況

• 調用者是函數
  • 函數通過對象被調用（this指向對象 ）
  • 函數單獨被調用（this指向undefined，非strict 模式下指向全域）
• 調用者是對象
  • 對象聲明在函數中 （this指向undefined，非strict 模式下指向全域）
  • 對象聲明在函數外 （this指向全域）

PS:匿名函數的存在會導致this指向的丟失與以上情況不符合，用bind()來解決就可以了

舉一些栗子??????

• 栗子??一

  var a = 1;  var obj = {      a:2,      c:this.a + 10,      b: function () {          return this.a;      }}console.log(obj.b()); //函數b通過對象obj被調用，this指向obj【2】console.log(obj.c); //對象聲明在函數外，this指向全域【11】

• 栗子??二

  var o = {  a:10,  b:{      a:12,      fn:function(){          console.log(this.a);      }  }}o.b.fn();//fn通過對象被b調用，this指向b【12】

• 栗子??三

  var o = {  a:10,  b:{      a:12,      fn:function(){          console.log(this.a);          console.log(this);      }  }}var j = o.b.fn;//fn未被執行j();//此時fn單獨被調用，this指向全域,全域沒有a【undefined】【window】

• 栗子??四

  var name = ‘222‘;  var a = {      name:‘111‘,      say:function () {          console.log(this.name);      }  }  var fun = a.say;//say未被執行  fun();//say單獨被執行,this指向全域【222】  a.say();//函數say通過對象a被調用,this指向對象a【111】  var b = {      name: ‘333‘,      say: function (fun) {          fun();      }  }  b.say(a.say);//a.say未被執行  fun();//say單獨執行,this指向全域【222】  /*b.say(function(){}),但是通過b對象調用的函數say被執行,this指向b,。   但此時的this不是我們要列印的this，我們要列印的this在function(){}裡，function裡的this指向全域   */  b.say = a.say;//a.say未被執行,將function賦值給了b，此時b對象也可以列印啦！  b.say();//say函數被對象b調用執行,this指向b【333】

• 栗子??五

  var name = ‘global‘;var obj = {  name: ‘obj‘,  getName: function () {      return function () {          console.log(this.name);      }  }}obj.getName()();//【global】/*var fn = obj.getName();fn();*/

call和apply改變this指向

• call和apply的第一個參數都是this的指向
• call的其他參數是一個一個傳的
• apply的其他參數以數組形式傳遞。

  function fn(a,b,c) {  console.log(this.a + a + b + c);}var obj = {  a: 20}fn.call(obj, 10, 20, 30);//【80】fn.apply(obj, [100, 200, 300]);//【620】

• 
  學習過程中遇到什麼問題或者想擷取學習資源的話，歡迎加入學習交流群
  343599877，我們一起學前端！

JavaScript裡的小妖精