ES6 箭头函数

最新推荐文章于 2024-07-26 20:46:33 发布

一只川

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量104

点赞数

分类专栏： web前端文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/m0_51622088/article/details/126045291

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、this的指向

this是静态的始终指向函数声明时所在的作用域下的this的值

	    // 普通函数
		function getName(){
			console.log(this);
			console.log("@"+this.name);
		}
		// 箭头函数
		let getName2=()=>{
			console.log(this);
			console.log("@"+this.name);
		}
		// 设置window的值
		// var name="xxx";
		window.name="lccc";
		const school={
			name:'实验中学'
		};
		// 直接调用
		 getName();
		/getName2();
		 call方法(可以改变函数内部this的值)
		 getName.call(school);
		 getName2.call(school);

作用域

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

	 let Person=(name,age)=>{
			this.name=name;
			this.age=age;
		 }
	 let me=new Person("lily",20);
	 console.log(me);

不能实例化对象，后台报错

3、不能使用 arguments 、super、new.target

详见mdn官方文档Web 开发技术箭头函数

	 let fn=()=>{
		 	console.log(arguments);
		 }
	 fn(1,3);

不能使用arguments

4、简写

	 4.1 当形参有且只有一个时 可以省略小括号

	let add=n=>{return n+n};
	console.log(add(2));

	4.2 当代码只有一条语句时，可以省略花括号，同时省略了花括号页必须省略return   
	语句的执行结果就是返回值

 let pow=n=>n*n;
 console.log(pow(4));

5、应用场景

（1）使用定时器

例：改变div的背景色

<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: beige;
		}
	</style>
	<body>
		<div id="ad"></div>
		<script type="text/javascript">
			let ad=document.getElementById('ad');
			ad.addEventListener("click",function(){
				console.log('@'+this);//function的作用域
				setTimeout(function(){
					// 修改背景色
					this.style.background='pink';//可以注释掉执行查看this的指向
					console.log(this);
					// 报错，因为setTimeout函数是全局函数，this指向window
				},2000)
			})
		</script>
	</body>

查看指向

this指向全局

可以写为

第一种：先保存this，再使用

<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: beige;
		}
	</style>
	<body>
		<div id="ad"></div>
		<script type="text/javascript">
			let ad=document.getElementById('ad');
			ad.addEventListener("click",function(){
				// 用zhizhen变量保存当前的this，this指向监听的事件 ad
				let zhizhen=this;
				setTimeout(function(){
					// 修改背景色
					zhizhen.style.background='pink';
					console.log(this);
				},2000)
			})
		</script>
	</body>

第二种：使用箭头函数

<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: beige;
		}
	</style>
	<body>
		<div id="ad"></div>
		<script type="text/javascript">
			let ad=document.getElementById('ad');
			ad.addEventListener("click",function(){
				setTimeout(()=>{
					// 修改背景色
					this.style.background='pink';
					//指向setTimeout->function->ad,往外找到最后一层
		//可以理解为this 由setTimeout调用，setTimeout由function调用，
		//function由ad调用,箭头函数的this找到的最外层作用域就是ad
					console.log(this);
				},2000);
			})
		</script>
	</body>

（2）数组方法的回调

例：返回偶数

第一种：普通函数

		const arr=[1,3,6,9,12,83];
			const reslut=arr.filter(function(item){
				if(item%2===0){
					return true;
				}else{
					return false;
				}
			});
		console.log(reslut);
		//(2) [6, 12]
		//0: 6
		//1: 12
		//length: 2
		//[[Prototype]]: Array(0)

第二种：箭头函数

		const arr=[1,3,6,9,12,83];
		const result=arr.filter((item)=>{
				if(item%2===0){
						return true;
				}else{
						return false;
				}
			});
		console.log(result);
		//(2) [6, 12]
		//0: 6
		//1: 12
		//length: 2
		//[[Prototype]]: Array(0)

总结

箭头函数的写法
xxx=(没有参数可以不写括号，有一个参数也可以不写括号，详见上面的内容)=>{ }
1、箭头函数没有自己的this，会一直往外寻找，也是不同于普通函数 function 的一点；如上面提到的更改div的背景色。
2、箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this。
3、箭头函数更适用于本来就需要使用匿名函数的地方；
4、箭头函数适合与this无关的回调，如定时器，数组的方法回调
箭头函数不适合与this有关的回调，dom元素的事件回调（如上面提到的更改div的背景色第一种写法），对象的方法，例如


{
	//最外层作用域fn1
	{
		name:"xxx",
		getName:function(){
			this.name;//作用域为fn1，指向fn1
		}
	}
}
//此处作用域在fn1外，为全局作用域,
window.name=1;

{
	//最外层作用域fn1
	{
		name:"xxx",
		getName:()=>{this.name;}//this指向fn1的外层，即此处window
	}
}