箭头函数语法及书写规则。
1.箭头函数概述:
ES6 允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用 于匿名函数的定义;
2.箭头函数的注意点:
1. 如果形参只有一个,则小括号可以省略;
2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
3. 箭头函数 this 指向声明时所在作用域下 this 的值;
4. 箭头函数不能作为构造函数实例化;
5. 不能使用 arguments;
3.特性:
1. 箭头函数的 this 是静态的,始终指向函数声明时所在作用域下的 this 的值;
2. 不能作为构造实例化对象;
3. 不能使用 arguments 变量;
4.代码演示及相关说明:
注意:箭头函数不会更改 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.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>
2. 需求-2 从数组中返回偶数的元素:
<!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>
原文地址:https://blog.csdn.net/2301_81449444/article/details/142999724
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/353205.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/353205.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!