es6箭头函数中this的问题

最新推荐文章于 2024-04-26 21:30:32 发布

今天的风儿有点喧嚣

最新推荐文章于 2024-04-26 21:30:32 发布

阅读量3.9k

点赞数

分类专栏： web前端文章标签： web前端 es6this箭头函数

本文链接：https://blog.csdn.net/hiaia/article/details/53448154

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

开门见山直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
	
	var test1=()=>{
		console.log(this.name,this);
	}
	window.name = "obj window";
	class P{
		constructor(){
			this.name = "class p";
		}
		func(){
			var test2 = () =>{
				console.log(this.name,this);
			};
			function test3(){
				console.log(this);
			}
			test1();//obj window
			test2();//class p
			test3();//undefined
		}
	}
	var p = new P();
	p.func();
	
		</script>
	</body>
</html>

js中函数作用域属于静态作用域，就是函数作用域的嵌套关系在函数定义时确定了，废话不多说直接上例子

	var a='out a';
	function test(){
		console.log(a); // out a
	}
	function outer(){
		var a="in a";
		test()
	};
	outer();

就是说函数test在定义时作用域的嵌套关系就已经决定了。

ok，接下来就是箭头函数的this，

以下为我的理解，如有不正之处，望指点。

箭头函数不能用于构造函数，在上面的例子中，test1箭头函数定义在最外面，当test1函数打印this对象时会根据定义时决定的作用域嵌套关系逐级向上查找，因此查找的是window对象，在test2箭头函数中，由于test2定义在类P的func函数中，test2箭头函数打印this时，会先去func方法查找，找到了，然后打印。test3中，类中的方法默认开启了严格模式所以test3中this为undefined。可以将箭头函数中的this类比为函数中定义的变量，使用时按照定义时决定的作用域逐级查找直到找到为止。

今天的风儿有点喧嚣

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
es6箭头函数中this的问题

开门见山直接上代码 var test1=()=>{ console.log(this.name,this); } window.name = "obj window"; class P{ constructor(){ this.name = "class p"; } func(){ var test2 = () =>{
复制链接

扫一扫