变幻莫测的this指向

一.变幻莫测的this指向

在前端的面试中，this 指向与面向对象是必考题，也是日常开发中绕不开的话题，很多前端
老鸟也会在this 指向这里掉坑。本节课围绕this 指向问题,去分析this 在不同环境下的不同指向。

1.透彻认识function 的this 在不同调用环境下的指向

1. 事件调用环境谁触发事件，函数里面的this 指向的就是谁。

2. 全局环境 浏览器非严格模式环境window，严格模式环境undefind node环境module.exports

       console.log('全局this',this); // window

   

3. 函数内部
   【this 最终指向的是调用它的对象】
   · 普通函数直接调用与window 调用

       let box = document.querySelector('.box');
       let lili = document.querySelector('.lili');
       box.onclick = move;
       lili.onclick = move;
   
       function move(){
           this.style.left = '100px';
           console.log('事件this', this) // this指向点击元素(box或lili)
       }

   

   · 对象中的函数直接调用与window 调用

       var obj ={
           a:10,
           b:function(){
               console.log('tag', this)
           }
       }
       window.obj.b()  // 对象obj
       obj.b()         // 对象obj

【函数被多层对象所包含，如果函数被最外层对象调用，this 指向的也只是它上一级的对象】
· 多层对象中的函数的this 指向

         var obj = {
             a:10,
             b:{
                 fn:function(){
                     console.log(this);
                 }
             }
         }
         window.obj.b.fn();  // 对象b
         obj.b.fn();         // 对象b

· 对象中的函数被赋值给另一个变量

             a:10,
             b:{
                 fn:function(){
                     console.log(this);
                 }
             }
         }
         var abc = obj.b.fn;
         abc();              // window
         abc.call(obj);      // 对象obj

  
  ![image.png](https://upload-images.jianshu.io/upload_images/17618149-2deeca8a24e3f5b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

【构造函数中的this 指向的是实例对象】

   · 构造函数中的this 指向
   · new 运算符的作用
   【如果构造函数中有return 如果return 的值对象，this 指向返回的对象，如果不
   是对象，则this 指向保持原来的规则，在这里，null 比较特殊】

2.了解箭头函数中的this 指向的特殊性

箭头函数本身是没有this 和arguments 的，在箭头函数中引用this 实际上调用的是定义
是的上一层作用域的this。这里强调一下是上一层作用域，因对对象是不能形成独立的作用
域的。

3.掌握如何改变this 指向

call / apply / bind