this指向知识梳理

function的this在不同环境下调用的指向

1.事件调用环境

谁调用事件，this就指向谁

<body>
    <div class="boxs"></div>
</body>
</html>
<script>
    let b = document.querySelector(".boxs")
    function a(){
        console.log(this)
    }
    b.onclick = a // <div class="boxs"></div>

</script>

2.全局环境下

//在浏览器环境中
<script>
  console.log(this) // window
</script>
//在node环境中
consple.log(this)//{}
console.log(this=== module.exports) //true
所以指向的是导出的那个对象

3.在函数内部环境


<script>
  //this最终指向的是调用他的对象
    function a(){
        console.log(this)
    }
    a()  //在非严格模式下指向的是window 在严格模式下指向的是undefined

  //严格模式下调用  window.a()


//函数被多层对象调用，this只指向他的上一级对象
　　var obj = {
        a:10,
        b:function(){
            console.log(this)
        }
    }
    obj.b()//obj
    window.obj.b()//obj
</script>

4.在构造函数中

//没有return的构造函数  
function fn(){
        this.num = 10
        console.log(this)

    }
    var obj = new fn()

　　console.log(obj.num)//fn{num:10} 

//1.调用函数 

//2.自动在函数内部创建一个对象 

//3.将这对象和这个构造函数绑定 

//4.如果构造函数没有返回值，隐式返回this对象

function fn(){
        this.num = 10
        console.log(this)
　　　　 return ''  {}  []
     }

var obj = new fn()

console.log(obj.num)//fn{num:10} undefined undefined

如果构造函数中return的是一个对象或者数组，this指向返回的对象，如果不是，this指向这个构造函数，null比较特殊

5.箭头函数中

 function a(){
        setTimeout(function(){
            console.log(this) //这里的this指向window
        },1000)
        setTimeout(()=>{
            console.log(this)  //这里的this指向上一级作用域的this
        },1000)
        
    }
    a()

6.修改this指向

let b = document.querySelector(".boxs")
    var obj = {
        a:1,
        fn:function(){
            console.log(this)
        }
    } 
   obj.fn.call(b,a,s,d) //第一个参数调用的对象，后面的对象
   obj.fn.apply(b,[a,s,d]) //第一个参数调用的对象，第二个参数是数组
   obj.fn.bind(b) //这样并没有调用只是改变了this指向