js中this的指向以及改变this指向的方法

一、全局环境 this—>window

<script>
    console.log(this)   //window
</script>

二、函数作用域中的this  this—>调用者

直接调用全局函数fun()，实际上是window.fun()的简写，调用者是window

<script>
    //全局环境下的函数
    function fun(){
        console.log(this)
    }

    fun()        //window
</script>

对象调用函数时，this指向.前面的对象

<script>
    //一层嵌套
    let obj = {
        f:function(){
            console.log(this)
        }    
    }

    obj.f()                  //obj

    //两层嵌套
    let obj2 = {
        innerObj:{
            f:function(){
                console.log(this)
            }
        }
    }

    obj2.innerObj.f()        //innerObj
</script>

三、箭头函数

普通函数是执行的时候进行绑定，箭头函数是声明的时候就绑定

1.最外层没有函数包裹，那就是在全局作用域下

  console.log(this)        //window
  
  //找声明时的最外层函数作用域
  //最外层没有函数包裹，那就是在全局作用域下  
  let obj = {
    obj1:{
      obj2:{
        fun1:function(){
          console.log(this);
        },
        fun2:()=>{
          console.log(this);
        }
      }
    }
  }

  obj.obj1.obj2.fun1()     //obj2
  obj.obj1.obj2.fun2()     //window

2.有函数包裹，this就是当前函数的this

 let obj = {
    obj1:{
      obj2:{
        
        fun1:function(){
          return ()=>{
            console.log(this);
          }
        },
        
      }
    }
 }

 obj.obj1.obj2.fun1()()        //obj2

四、改变this指向的方法

1.apply 参数以数组形式写 改变完立即执行一次

obj.fun.apply(this新指向对象,['参数1','参数2'])

2.call  参数用逗号分隔 改变完立即执行一次

obj.fun.call(this新指向对象,'参数1','参数2')

3.bind 参数用逗号分隔 改变完不会立即执行

obj.fun.bind(this新指向对象,'参数1','参数2')