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指向