浅谈箭头函数
概述：
ES6 允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用
于匿名函数的定义；
箭头函数的注意点：
1. 如果形参只有一个，则小括号可以省略；
2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；
3. 箭头函数 this 指向声明时所在作用域下 this 的值；
4. 箭头函数不能作为构造函数实例化；
5. 不能使用 arguments；
特性：
1. 箭头函数的 this 是静态的，始终指向函数声明时所在作用域下的 this 的值；
2. 不能作为构造实例化对象；
3. 不能使用 arguments 变量；
代码演示及相关说明：
注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数</title>
</head>
<body>
<script>
// ES6 允许使用箭头（=>）定义函数
// 传统写法：无参数
var say = function () {
console.log("hello！");
}
say();
// ES6 箭头函数： 无参数
let speak = () => console.log("hello 哈哈！");
speak();
// 传统写法：一个参数
var hello = function (name) {
return "hello " + name;
}
console.log(hello("訾博"));
// ES6 箭头函数：一个参数
let hi = name => "hi " + name;
console.log(hi("訾博"));
// 传统写法：多个参数
var sum = function (a, b, c) {
return a + b + c;
}
console.log(sum(1, 2, 3));
// ES6 箭头函数：多个参数
let he = (a, b, c) => a + b + c;
console.log(he(1, 2, 3));
// 特性
// 1、箭头函数的this 是静态的，始终指向函数声明时所在作用域下的this 的值
const school = {
name: "大哥",
}
// 传统函数
function getName() {
console.log("getName：" + this.name);
}
// 箭头函数
getName1 = () => console.log("getName1：" + this.name);
window.name = "訾博";
// 直接调用
getName();
getName1();
// 使用call 调用
getName.call(school);
getName1.call(school);
// 结论：箭头函数的this 是静态的，始终指向函数声明时所在作用域下的this 的
值
// 2、不能作为构造实例化对象
// let Persion = (name, age) => {
// this.name = name;
// this.age = age;
// }
// let me = new Persion("訾博",24);
// console.log(me);
// 报错：Uncaught TypeError: Persion is not a constructor
// 3、不能使用 arguments 变量
// let fn = () => console.log(arguments);
// fn(1,2,3);
// 报错：Uncaught ReferenceError: arguments is not defined
</script>
</body>
</html>
需求-1：点击 div 2s 后颜色变成『粉色』：
传统写法存在问题：
代码：
报错：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景</title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件
ad.addEventListener("click", function () {
// 传统写法
// 保存 this 的值 let _this = this;
// 定时器：参数1：回调函数；参数2：时间；
setTimeout(function () {
console.log(this);
_this.style.background = 'pink';
}, 2000);
// 报错Cannot set property 'background' of undefined
});
</script>
</body>
</html>ES6 写法：
（从这个案例中就能理解 ES6 箭头函数的特性了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景</title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件：这也是错误写法，这里的this 还是window
// ad.addEventListener("click", () => {
// ES6 写法
// 定时器：参数1：回调函数；参数2：时间；
// setTimeout(() => this.style.background = 'pink', 2000);
// })
// 绑定事件
ad.addEventListener("click",
function () { //
ES6 写法
// 定时器：参数1：回调函数；参数2：时间；
// 这个this 才是ad
setTimeout(() => this.style.background = 'pink', 2000);
}
)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景</title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
//需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25];
// const result = arr.filter(function (item) {
// if (item % 2 === 0) {
//
return true;
// } else {
//
return false;
// }
// });
const result = arr.filter(item => item % 2 === 0);
console.log(result); // 箭头函数适合与 this 无关的回调. 定时器, 数组的方
法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
</script>
</body>
</html>