ES6 允许使用 箭头 => 定义函数
等号后跟一个大于号 =>
let fn = function(){
}
附:旧版函数定义方式
let fn2 = (a,b) =>{
return a + b;
}
用箭头函数来定义(将function替换为括号箭头)function ()=>{}
调用箭头函数 fn2
console.log(fn2(1,2));
省略写法
省略写法,形参唯一的时可省略括号,{}内只有一条语句时候可省略{}
//当形参只有一个时可省略形参外的括号
let fn5 = n => {
console.log(n*n);
}
//当大括号内只有一条语句时,可省略一对大括号,即函数 fn5 可省略写成
let fn5 = n => console.log(n*n);
//调用fn5
fn5(3)
箭头函数使用注意事项
1. this是静态的,this始终指向函数声明时所在作用域下this的值
function getName(){ //常规声明
console.log(this.name);
}
let getName2 = () =>{ //箭头函数
console.log(this.name);
}
window.name = 'xxx'; //将window下的name设初值为 xxx
const rename = {
name:'yyy' //重命名name为 yyy
}
//直接调用
getName(); //打印xxx
getName2(); //打印xxx
//call 方法调用
getName.call(rename); //打印yyy
getName2.call(rename); //打印xxx
为什么箭头函数getName2.call打印的值为依旧为xxx?
原因分析:this始终指向函数声明时所在作用域下this的值;getName2的作用域为window窗体
2. 不能作为构造实例化对象
let Person = (name,age) =>{
this.name=name;
this.age=age;
}
let me = new Person('xiao',30);
console.log(me); //Uncaught TypeError: Person is not a constructor
3. 不能使用arguments 变量
function fn3(){
console.log(arguments);
}
fn3(1,2,3); //Arguments(3)
//0: 1
//1: 2
//2: 3
let fn4 = () =>{
console.log(arguments);
}
fn4(1,2,3); //arguments is not defined
箭头函数实践
任务1: 点击div,2秒改变背景色
<style>
div{
width: 200px;
height: 200px;
background: #58a;
}
</style>
普通方式实现
<script>
let ad = document.getElementById('ad');
ad.addEventListener("click",function(){
let _this = this;//因为this指向window,window下没有style属性,故在外层用_this保存this的值
setTimeout(function(){
console.log(_this);
_this.style.backgroundColor = 'pink'; //setTimeout作用域下找不到_this往外层寻找
},2000);
});
</script>
箭头函数实现
<script>
let ad = document.getElementById('ad');
ad.addEventListener("click",function(){
//this在addEventListener中的function,指向事件源ad,ad有style属性,所以可以完成修改背景色
setTimeout(()=>{
this.style.backgroundColor = 'pink';
}, 2000);
});
</script>
任务2: 数组中返回偶数的元素
const arr = [1,6,9,10,11,22,336];
const result = arr.filter(function(item){
if(item % 2 == 0){
return true;
}else{
return false;
}
});
console.log(result);
匿名函数实现
const result = arr.filter(item=>{
if(item % 2== 0 ){
return true;
}else{
return false;
}
});
箭头函数实现
const result = arr.filter(item => item % 2 === 0);
箭头函数极简实现(形参唯一,省略括号;花括号内只有一条语句,省略大括号)
打印结果
使用场景总结
- 箭头函数适合与this 无关的回调.例如:定时器,数组的方法回调
- 箭头函数不适合与 this 有关的回调 例如:事件回调,对象的方法