箭头函数

箭头函数的基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
// 箭头函数:也是一种定义方式
// 1.定义函数的方式 function
const fun = function () {

}

// 2.对象字面量中定义函数
const obj = {
fun: function() {

},
fun1() {

}
}

// 3.ES6中的箭头函数
const abc = (参数列表) => {

}
// 无参数:
const abc = () => {

}
</script>

箭头函数参数和返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
// 1.参数问题
// 1.1放入两个参数:
const sum = (num1, num2) => {
return num1 + num2;
}

// 1.2放入一个参数
const mul = (num) => {
return num * num
}

const mul = num => {
return num * num
}

// 2.函数中
// 2.1函数代码块中有多行代码时
const test = () => {
console.log('Hello World');
console.log('Hello Vue.js');
}

// 2.2函数代码块中只有一行代码时
const mul1 = (num1, num2) => {
return num1 * num2
}
// ①:有返回值
const mul1 = (num1, num2) => num1 * num2
console.log('mul' + mul1(200, 3));
// ②:无返回值:
const mul2 = () => console.log('Hello Demo');
console.log('mul2==' + mul2);
</script>

箭头函数的this使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
// 问题:箭头函数中的this是如何查找的
// 答案:向外层作用域中,一层层查找this,直到有this的定义
// 结论:箭头函数中的this引用的就是最近作用域中的this
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this); //window
})

setTimeout(() => {
// 外层的setTimeout函数指向的就是window
console.log(this); //window
})
})

setTimeout(() => {
setTimeout(function () {
console.log(this); //window
})

setTimeout(() => {
// 外层的setTimeout函数指向的就是obj对象
console.log(this); //obj对象
})
})
}
}

obj.aaa()
</script>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信