JavaScript笔记-箭头函数

https://www.liaoxuefeng.com/wiki/1022910821149312基于廖雪峰老师的教程所做的笔记。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数操作展示</title>
</head>
<body>

<script>

    /*原函数——一个参数*/
    function square(x){
        return x*x;
    }
    /*等价的箭头函数*/
    var squareArrow=x=>x*x;

    console.log(square(2));//结果为4
    console.log(squareArrow(2));//结果为4

    /*原函数——多个参数*/
    function add(x,y){
        return x+y;
    }
    /*等价的箭头函数*/
    var addArrow=(x,y)=>x+y;//多个参数要用()括起来

    console.log(add(1,2));//结果为3
    console.log(addArrow(1,2));//结果为3

    /*原函数——返回值为一个对象*/
    function getName(){
        return{
            firstName:"Guorui",
            lastName:"Sang"
        }
    }
    /*等价的箭头函数*/
    var getNameArrow=()=>({//没参数，用()代替；返回的对象用{}括起来，防止和标识函数体的花括号搞混
      firstName: "Guorui",
      lastName: "Sang"
    })

    console.log(getName());//返回如上定义的对象
    console.log(getNameArrow());//返回如上定义的对象

    /*原函数——多条语句*/
    function abs(x){
        if(x>=0)
            return x;
        else
            return -x;
    }

    /*等价的箭头函数*/
    var absArrow=(x)=>{
        if(x>=0)
            return x;
        else
            return -x;
    }

    console.log(abs(-11));//结果为11
    console.log(absArrow(-11));//结果为11

    /*小技巧——使用箭头函数可以避免对象的内嵌方法访问不到对象数据的问题*/
    var obj={
        age:20,
        city:"Shenzhen",
        show:function(){//方法
            console.log(this.age);//this指向obj
            let printCity=()=>{
                console.log(this.city);//用箭头函数，此时this指向obj
            }
            printCity();
        }
    }

    obj.show();//结果为20 Shenzhen


</script>
</body>
</html>