js中一般函数和ES6扩展的箭头函数this指向问题总结

1.一般函数的this一般指向当前对象

var student={
			name:"marry",
			age:18,
			eat:function(){
				console.log(this)
				console.log(this.name+"正在吃饭")
				setTimeout(function(){
					console.log(this)
				})
			}
}
student.eat()

输出结果如下:

定时器是异步操作,执行的时候,已经不指向当前的student对象了,指向的是执行的时候,所在的环境,所以输出的是window对象。

2.箭头函数的this,指向的是定义的时候所在的对象,不是使用的时候所在的对象

再如下代码段,将定时器里的函数调整为箭头函数:

var student={
			name:"marry",
			age:18,
			eat:function(){
				console.log(this)
				console.log(this.name+"正在吃饭")
				setTimeout(()=>{
					console.log(this)
                })
			}
}
student.eat()

输出结果为:

改为箭头函数后,this的指向发生了变化,不再指向window对象,而是定义时所在的对象

若是将eat函数再调整为箭头函数:

var student={
			name:"marry",
			age:18,
			eat:()=>{
				console.log(this)
				console.log(this.name+"正在吃饭")
				setTimeout(()=>{
					console.log(this)
				})
			}
}
student.eat()

输出结果如下,均指向了window对象

3.给元素对象绑定事件处理函数的时候,this指向当前触发事件的元素对象

<body>
		<ol>
			<li>索引下标0</li>
			<li>索引下标1</li>
			<li>索引下标2</li>
			<li>索引下标3</li>
			<li>索引下标4</li>
		</ol>
</body>
<script type="text/javascript">
		var lis=document.getElementsByTagName("ol")[0].getElementsByTagName("li");
		lis=Array.from(lis);
		lis.forEach(function(li,index){
		 	li.onclick=function(){
		 		this.style.backgroundColor="pink"
				console.log(this)
			}
		})
</script>

当点击li对应输出该元素对象:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值