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

关于this指向这个问题，活生生折磨了我一个下午，回来静下心捋顺一下，总结出来一下规律。

当然，this这个复杂的问题不是一句两句可以说清楚，作为菜鸟，我的总结也就是为了做一些 ‘坑人的’ 笔试题，所以只能欢迎吐槽了。

---

题中一般分为两种情况

• 调用者是函数
  • 函数通过对象被调用（this指向对象 ）
  • 函数单独被调用（this指向undefined，非严格模式下指向全局）
• 调用者是对象
  • 对象声明在函数中 （this指向undefined，非严格模式下指向全局）
  • 对象声明在函数外 （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，我们一起学前端！