箭头函数
所谓的箭头函数是函数的另一种语法形式。
语法规则
const fun = function(){} 普通函数
const fun = ()=>{} 箭头函数
将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
实例
<div>我是div</div>
<script>javascript">
const oDiv = document.querySelector('div');
// 普通函数
oDiv.addEventListener('click' , function(){
console.log('我是div标签')
});
// 箭头函数
oDiv.addEventListener('click' , ()=>{
console.log('我是div标签');
});
</script>
如果函数只有一个参数,可以不写()
const fun = function(e){} 普通函数
const fun = e => {} 箭头函数
实例
<div>我是div</div>
<script>javascript">
const oDiv = document.querySelector('div');
// 只有一个参数，可以不写(),直接定义一个参数
oDiv.addEventListener('click' , e=>{
console.log(e);
});
</script>
如果执行体中只有一行代码,可以不写{}
const fun = e=>{console.log(e)} 普通箭头函数
const fun = e=> console.log(e) 不写{}箭头函数
实例
<div>我是div</div>
<script>javascript">
// 只有一行代码,不写{}
oDiv.addEventListener('click' , e=>console.log(e) )
</script>
箭头函数中的this指向
在箭头函数中,this指向有特殊的意义，专门可以用来配合构造函数和面向对象编程思想。
规则
在箭头函数中，this指向要看父级程序的this指向
如果父级程序有this指向，那么箭头函数指向的就是父级程序的this
如果父级程序没有this指向，那么指向的就是window
普通函数的this指向
声明式，赋值式/匿名函数，对象中函数，绑定的事件处理函数
this都是指向的调用函数时，之前定义的内容
实例
<div>1234</div>
<script>javascript">
// 1,声明式 --- 指向的是window
function fun1(){
console.log(this);
}
fun1();
// 2,匿名函数/赋值式 --- 指向的是window
const fun2 = function(){
console.log(this);
};
fun2();
// 3,定义在对象中的函数 --- 指向的是对象
const obj = {
fun3 : function(){
console.log(this);
}
};
obj.fun3();
// 4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
const oDiv = document.querySelector('div');
oDiv.onclick = function(){
console.log(this);
};
oDiv.addEventListener('click' , function(){
console.log(this);
});
</script>
箭头函数的tihs指向
与普通函数的this指向是有区别的
箭头函数中，this的指向是父级程序的this指向
实例
<div>1234</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>javascript">
const oDiv = document.querySelector('div');
// 当前的程序,，箭头函数的父级程序，没有
// this指向的就是window
oDiv.addEventListener('click' , ()=>{
console.log(this);
});
// 对li进行操作
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
console.log(this); // 输出的是forEach的函数的this指向
// 箭头函数的this,是父级程序,forEach()的this,是window
item.addEventListener('click' , ()=>{
console.log(key,this);
})
});
// forEach()中 函数的this指向,就是window
const arr = [1,2,3,4,5,6];
arr.forEach(function(){
console.log(this);
});
const obj = {
// 普通函数,this指向对象
fun1 : function(){console.log(this)},
// 箭头函数this指向是,父级程序
// 父级程序是对象
// 只有函数有this,obj对象没有this
// 父级程序没有this,指向的是window
fun2 : ()=>{console.log(this)},
// fun3是一个普通函数,this指向的是obj对象
fun3 : function(){
// fun4,是一个箭头函数,this指向的是父级程序的this指向
// 父级程序是fun3,fun3的this是对象,fun4箭头函数的this也是对象
const fun4 = ()=>{console.log(this)};
fun4();
}
};
obj.fun1();
obj.fun2();
obj.fun3();
</script>
关于this的总结
1，普通的function函数
声明式 --- window
赋值式 --- window
forEach循环 --- window
定时器，延时器 --- window
对象中的函数 --- 对象本身
事件绑定事件处理函数 --- 绑定事件的标签
2，箭头函数的this指向
父级程序的this指向
如果父级程序有this指向(父级程序也是函数)，this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象....)，this指向的是window
注意：箭头函数，不能改变this指向，只有普通function函数，能改变this指向。
