ES6 - 箭头函数（替代匿名函数）

2019-04-10 本文已影响0人 Hyso

箭头函数替代匿名函数

无参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</style>
</style>
</head>
<body>
    <script>
       var fn = function() {
           console.log('匿名函数');
       }

       var f = () => {
            console.log('箭头函数');
       }

       // 匿名函数
       fn();
       // 箭头函数
       f();
    </script>
</body>
</html>

一个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</style>
</style>
</head>
<body>
    <script>
       var fn = function(name) {
           console.log(name);
       }

       var f1 = name => {
            console.log(name);
       }

       var f2 = (name) => {
            console.log(name);
       }

       // 匿名函数
       fn('匿名函数');
       // 箭头函数1
       f1('箭头函数1');
       // 箭头函数2
       f2('箭头函数2');
    </script>
</body>
</html>

多个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</style>
</style>
</head>
<body>
    <script>
       var fn = function(name, age) {
           console.log('My name is '+name+', I am '+age);
       }

       var f = (name, age) => {
            console.log('My name is '+name+', I am '+age);
       }

       // My name is Tome, I am 18
       fn('Tome', 18);

       // My name is Perrer, I am 20
       f('Perrer', 20);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</style>
</style>
</head>
<body>
    <script>
       var students = [1, 3, 5];

        students.forEach(function(value, index) {
            // 0 : 1
            // 1 : 3
            // 2 : 5
            console.log(`${index} : ${value}`);
        })

        students.forEach((value, index) => {
            // 0 : 1
            // 1 : 3
            // 2 : 5
            console.log(`${index} : ${value}`);
        })
    </script>
</body>
</html>

箭头函数和匿名函数的区别

箭头函数体内的 this 由其外层函数决定；匿名函数体内的 this 由其调用方式决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</style>
</style>
</head>
<body>
    <script>
        var person = {
            age: 18,
            // 箭头函数形式
            run: ()=>{
                setTimeout(()=>{
                    // this 指向 window 对象
                    // 分析：箭头函数里的 this 不再由箭头函数的调用方式决定，而是由其外层函数决定，而这里的外层 run 函数也是箭头函数，所以由其外层函数决定
                    console.log(this);
                }, 100)
            },
            // 匿名函数形式
            travel: function() {
                setTimeout(()=>{
                    // this 指向 person 对象
                    // 分析：匿名函数里的 this 由匿名函数的调用方式决定
                    console.log(this);
                }, 100)
            },
            // ES6 对象方法的简写形式（推荐使用方式）
            say() {
                // this 指向 person 对象
                console.log(this);

                setTimeout(()=>{
                    // this 指向 person 对象
                    // 分析：箭头函数里的 this 由其外层函数决定
                    console.log(this);
                }, 100)
            }
        }

        person.run();

        person.travel();

        person.say();
    </script>
</body>
</html>

箭头函数不可以当做构造函数使用，即不可以使用 new 命令
箭头函数不可以使用 arguments 对象，如果要用，可以用 rest 参数代替（https://www.jianshu.com/p/ffd27c23b751）

ES6 - 箭头函数（替代匿名函数）

猜你喜欢

热点阅读