简洁的箭头函数-CFANZ编程社区

文章目录

- 箭头函数的声明和调用
- 箭头函数使用中的注意事项

箭头函数的声明和调用

<script type="text/javascript">
			let fun1 = function(a,b){
				return a + b
			};
			
			//箭头函数的声明
			let fun2 = (a,b) => {
				return a + b
			};
			//箭头函数的调用
			let result = fun2(1,2)//3
</script>

箭头函数使用中的注意事项

箭头函数中的this始终指向的是函数声明时所在作用域下的this，也就是说this是静态的
使用场景：箭头函数适合与this无关的回调，定时器以及数组的方法回调
示例代码一

window.name = "window"
			let obj = {
				name:"Penrose",
				getName:() =>{
				  //此时的this指向的是window作用域下的this
					console.log(this.name);
				}
			};
obj.getName()//输出的是window

示例代码二

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo{
				width: 300px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
		<script type="text/javascript">
		//需求：点击div后，2s后背景变为purple
			let div = document.querySelector(".demo");
			div.addEventListener("click",function(){
				setTimeout(()=>{
					//这个箭头函数中的this指向的是此箭头函数声明时所在的作用域下的this
					//即this指向在监听器下的作用域的this，而监听器中的this指向的就是事件源
					this.style.backgroundColor = "purple";
				},2000)
			})
		</script>
	</body>
</html>

不能作为构造函数实例化对象

<script type="text/javascript">
			let Person = (name,age) =>{
				this.name = name;
				this.age = age;
			};
			
			let p = new Person("Penrose",22)
			
			//错误信息
			//Uncaught TypeError: Person is not a constructor
</script>

不能使用arguments属性

<script type="text/javascript">
			let fn = () =>{
				console.log(arguments)
			}
			fn(1,2,3)
			
			//错误信息
			//arguments is not defined
</script>

箭头函数的缩写：
1. 有且仅有一个形参时可以省略小括号
2. 有且仅有一行代码时可以省略花括号，并且需要省略return