文章目录
- 前言
- 一、定义
- 二、简化
- 1.当函数参数只有一个时
- 2.当函数体只有一条return语句时
- 三、注意
- 1.箭头函数的this
- 2.不能作为构造函数实例化对象
- 3.不能使用argument变量
- 总结
前言
简单的讲，箭头函数是将原function关键字和函数名删掉的一种简写函数形式。
一、定义
通常函数的定义是：
fuction 函数名(参数){
//函数体
}
//例如
function fn1(a,b){
return a+b;
}
var fn2=function(a,b){
return a+b;
}
箭头函数定义如下：
(a,b)=>{
return a+b
}
//或
var fn1()=(a,b)=>{
return a+b
}
二、简化
1.当函数参数只有一个时
这时括号可以省略，但是没有参数时，括号不能省略。
var fn1=()=>{};//无参数
var fn2=a=>{};//单个参数
var fn3=(a,b)=>{};//多个参数
varr fn4=(a,b,...args)=>{};//多变参数
2.当函数体只有一条return语句时
这时可以省略{}和return关键字，但函数体包含多条语句时候，不能省略{}和return关键字。
()=>'hello';//返回'hello'字符串
(a,b)=>a+b;//返回a+b的和
(a)=>{
a=a+11
return a//多条语句
}
三、注意
1.箭头函数的this
箭头函数中的this是静态的，始终指向函数声明时所在作用域下的this值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getAge1() {
console.log(this.age);
}
let getAge2 = () => {
console.log(this.age);
}
window.age = 20;//设置window属性age
const school = {
age: 18
}
//直接调用
console.log("直接调用");
getAge1();
getAge2();
//使用call改变this指向调用
console.log("使用call改变this指向调用");
getAge1.call(school);
getAge2.call(school);
</script>
</body>
</html>
上述两个函数直接调用时，this均指向的是window作用域下的age，但使用call改变this指向school作用域下的age，发现箭头函数并未改变指向，正如上诉所说它的this是静态的，始终指向函数声明时所在作用域下的this值。
2.不能作为构造函数实例化对象
let People = (name, age) => {
this.name = name;
this.age = age;
}
let p = new People('王五', 20);
会报错
3.不能使用argument变量
let fn = () => {
console.log(arguments);
}
fn(1, 2, 3);
报错
总结
以上就是箭头函数的介绍，但是大家一定要注意箭头函数的实际运用，比如箭头函数与解构赋值结合，箭头函数与数组方法回调结合等。（与数组方法回调结合我会在后面ES6的常见数组新增方法中讲解）
