One, the basic use of arrow functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭头函数：也是一种定义函数的方式
// 1.定义函数的方式：function
const aaa =function () {
}
// 2.对象字面量中定义函数
const obj = {
bbb: function () {
},
/*bbb() {
}*/
}
// 3.ES6中的箭头函数
/*const ccc =(参数列表) => {
}*/
const ccc =() => {
}
</script>
</body>
</html>
Second, the parameters and return value of the arrow function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.参数问题：
// 1.1 放入两个参数
const sum = (num1, num2) => {
return num1 + num2
}
// 1.2 放入一个参数
/*const power = (num) => {
return num * num
}*/
const power = num => {
return num * num
}
// 2.函数中的
// 2.1 函数代码块中有多行代码块时
const test = () => {
// 1.打印Hello World
console.log('Hello World');
// 2.打印Hello Vue.js
console.log('Hello Vue.js');
}
// 2.2 函数代码块中只有1行代码块时
/*const mul = (num1, num2) => {
return num1 * num2
}*/
const mul = (num1, num2) => num1 * num2
console.log(mul(20, 30));
/*const demo = () => {
console.log('Hello Demo');
}*/
const demo = () => console.log('Hello Demo');
console.log(demo());
</script>
</body>
</html>
Three, the use of this in the arrow function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 什么时候使用箭头函数
/*setTimeout(function () {
console.log(this)
}, 1000)
setTimeout(() => {
console.log(this)
}, 1000)*/
// 问题：箭头函数中的this是如何查找的？
// 答案：向外层作用域中，一层层查找this,知道有this的定义
/*const obj = {
aaa() {
setTimeout(function () {
console.log(this) // window
}, 1000)
setTimeout(() => {
console.log(this) // obj对象
}, 1000)
}
}*/
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this) // window
})
setTimeout(() => {
console.log(this) // window
})
})
setTimeout(() => {
setTimeout(function () {
console.log(this) // window
})
setTimeout(() => {
console.log(this) // obj
})
})
}
}
obj.aaa()
</script>
</body>
</html>