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,我们一起学前端!