JS中的this指向包括箭头函数中this

文章目录

• 前言
• 一、this是什么？
• 二、this指向的几种情况
  • 1.在全局作用域中
  • 2.在普通函数中
  • 3.事件绑定中的this
  • 4.定时器中的this
  • 5.构造函数中的this
  • 6.箭头函数中的this
• 总结

---

前言

一、this是什么？

每个函数都有自己的this，但是this并不是在函数声明完就绑定的，只有在函数调用时，this才会被绑定

二、this指向的几种情况

1.在全局作用域中

        this指向的是window,在严格模式下依然指向的是window

 2.在普通函数中

        this的指向取决于谁调用的,谁调用他就指向谁

        

 var obj1 = {
            fn1:function() {
                console.log(this); 
            }
        }
        function fn2() {
            console.log(this); 
        }
        fn2();//调用处在全局,this指向window
        obj1.fn1();//通过obj1调用的,this指向obj

3.事件绑定中的this

        this的指向是触发他的事件源

       

var btn = document.querySelector('#btn')
btn.onclick=function(){
    console.log(this)
}

//指向的是触发他的btn

4.定时器中的this

        定时器中的this指向window,定时器中使用的是回调函数,而回调函数中this的指向是window

setInterval(function(){
	console.log(this)//window
},1000)

setTimeout(function(){
	console.log(this)//window
},1000)

5.构造函数中的this

        构造函数往往和new有着联系,new会将this指向改变为实例对象,所以构造函数中this指向实例对象

function fn() {
	this.name = '张三',
	this.age = 18,
	this.get = function(){
		console.log(this.name)
	}
}
		
var user = new fn()
user.get()

6.箭头函数中的this

        箭头函数中没有this,箭头函数的this的指向就是上下文中this的指向,构造函数中不能使用箭头函数

var obj = {
	fn1:()=>{
		console.log(this)
	},
    fn2:function(){
        console.log(this)
    }
}
obj.fn1() //window obj是在window中定义的,所以指向window
obj.fn2() //obj fn2是普通函数,经由obj调用的所以指向obj

---

总结

以上就是this指向中的一些情况