Javascript的 this指向 和 改变this指向的方法

1. this指向 (this是js中的关键字)

1. 普通调用

- 函数名()
- 函数内的this 指向window
    <script>  
    
    //1)
       console.log( this ) // 全局作用域 this
       
    //2)  
       function fn() {
         console.log( this ) //Window
         return this;
       }
       console.log( fn()===window ); // true
      
     //3)
       const obj = {
          ff:function(){
          console.log( this )
          return this;
    }       
      let f = obj.ff ; // 将对象中的函数赋值给变量f
      console.log( f()===window ) // true
      
     //4)（拓展了解即可）
       let arr = [function () {
       console.log(this)
       console.log( this===arr ) // true
       }]
       arr[0](); //arr[0]获得了函数，arr[0]()调用函数
       // 数组元素函数中的this指向调用该函数的 数组(数组也是对象)  
    </script>       

2. 对象调用

- 对象.函数名()
- 函数内的 this 指向 调用函数的对象 

//1)
  const obj1 = {
    ff: function () {
      console.log(this)
      return this;
    }
  }
  console.log( obj1.ff() === obj1 ) //true
  
//2)  
  function fn() {
    console.log(this)
    return this;
  }
  var o = {};
  o.f = fn; // fn中存储的函数地址赋值给o对象的f属性值
  console.log( o.f()===o ); // true

3. 事件处理函数

- 事件源.on事件类型 = 函数
- 事件源.addEventListener('事件类型',函数)
- 事件触发的时候,执行的函数中 this指向事件源(事件绑定在哪个身上 )

  <div style="width: 200px;"></div>
  document.onclick = function () {
    console.log( this )//#document
    console.log( this === document ) // true
  }
   
  const dv = document.querySelector('div');
  const obj = {
    ff: function () {
      console.log(this)//<div style="width: 200px;"></div>
      console.log( this === dv ) // true
    }
  }
  // obj.ff作为dv的事件处理函数
  dv.addEventListener('click',obj.ff);
  
  const dv = document.querySelector('div');
  dv.addEventListener('mouseup',function () {
    console.log( this )//<div style="width: 200px;"></div>
    console.log( this === dv ); // true
  })
  

4. 定时器调用

- setTimeout(函数,毫秒)
- setInterval(函数,毫秒)
- 函数中的 this 指向 window

     setTimeout(function(){
       console.log( this )
       console.log( this === window) // true
     },10)

     setInterval(function(){
       console.log( this )
       console.log( this === window) // true
     },10)

     const obj = {
       ff: function () {
         console.log(this)
         console.log(this === window) // true
       }
     }
     setTimeout(obj.ff, 10)

5. 自调用函数

- ;(函数)()
- 函数中的this指向 window
- 调用函数的语法
  + ;(函数)()
  + !(函数)()
  + ~(函数)()
  + 特点: 函数定义好之后立即执行
  
  ;(function(){
        console.log( this )//window
        console.log( this===window ) // true
  })()


  ~(function fn() {    
        console.log( this )//window
        console.log( this === window ) // true
  })();

6. 箭头函数

- 唯一一个不看调用方式,只看  **函数定义位置**  决定this指向,
- 箭头函数的this 指向的是 定义(书写)箭头函数 所在作用域中 this的指向  
-不停往上一级查找谁是this
  const obj = {
    ff: function () {
      console.log(this)
    },
    fn: () => { // 箭头函数定义在全局中
      console.log(this) //Window
      console.log(this === window) // true      
    }
  }
  obj.fn()


  document.onclick = function () {
    // this 指向事件源 document
    const obj = {
      fn: () => { // 箭头函数定义在全局中
        console.log(this)
        console.log(this === document) // true      
        // 箭头函数中的this和调用方式无关只和定义位置有关
      }
    }
    obj.fn()//输出true 

    let ff = obj.fn;
    ff();//输出true 
  }

2. 强行改变this的指向