JS中this的理解

其实JS中的this是一个非常简单的东西,只需要理解它的执行规则就OK。在这里不想像其他博客一样展示太多的代码例子弄得天花乱坠, 反而不易理解。call/apply/bind可以显式绑定, 这里就不说了。主要这些场隐式绑定的场景讨论:
1)全局上下文
2)直接调用函数
3)对象.方法的形式调用
4)DOM事件绑定(特殊)
5)new构造函数绑定
6)箭头函数

全局上下文全局上下文默认this指向window, 严格模式下指向undefined。
直接调用函数
比如:

let obj = {  
	a: function() {    
		console.log(this); 
	}
}
let func = obj.a;func();

这种情况是直接调用。this相当于全局上下文的情况。
对象.方法的形式调用
还是刚刚的例子,我如果这样写:

obj.a();

这就是对象.方法的情况,this指向这个对象

DOM事件绑定
onclick和addEventerListener中 this 默认指向绑定事件的元素。
IE比较奇异,使用attachEvent,里面的this默认指向window。

new+构造函数
此时构造函数中的this指向实例对象。

箭头函数
箭头函数没有this, 因此也不能绑定。里面的this会指向当前最近的非箭头函数的this,找不到就是window(严格模式是undefined)。比如:

let obj = {  
	a: function() {    
		let do = () => {      
			console.log(this);   
		}    
		do(); 
	}
}
obj.a(); // 找到最近的非箭头函数a,a现在绑定着obj, 因此箭头函数中的this是obj

优先级: new > call、apply、bind > 对象.方法 > 直接调用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲨鱼辣椒面丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值