前端研习录（39）——ES6 函数扩展讲解及示例分析

最新推荐文章于 2024-07-12 16:55:56 发布

清风不渡

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量226

点赞数

分类专栏：前端研习录文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/WXKKang/article/details/126464022

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（39）——ES6 函数扩展讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入ES6 函数扩展部分

一、函数扩展

1、定义

ES6支持使用（=>）定义函数，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        //ES5
        function demo1(x,y){
            return x+y;
        }

        var demo2 = function(x,y){
            return x+y;
        }

        //ES6
        var demo3 = (x,y) => x+y;
        var demo4 = x => x;
        var demo5 = () => 10;


        console.log(demo1(1,2));
        console.log(demo2(1,2));
        console.log(demo3(1,2));
        console.log(demo4(1));
        console.log(demo5());

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

结果如下：

在这里插入图片描述

如果有只有一个参数，小括号和省略不写，没有或存在多个参数则需要小括号
如果函数的代码块存在多条语句，则需要用{ }将其包裹
如果函数返回的是一个对象，则需要用 ( ) 将其包裹

2、用途

箭头函数可以简化匿名函数，示例如下（遍历数组）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var arr = [1,2,3];
        //ES5
        arr.map(function(item){
            console.log(item);
        })
        //es6
        arr.map(item =>{
            console.log(item);
        })

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

结果如下：

在这里插入图片描述

3、关于this指向

对于普通函数而言，内部的this指向的是函数运行时所在的对象，但是箭头函数没有自己的this对象，内部的this指向的是上层作用域中的this，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var name = "Tom";
        
        var user1 = {
            name : "Jerry",
            getName() {
                setTimeout(
                    function(){
                        console.log(this.name);
                    }
                )
            }
        }

        var user2 = {
            name : "Jerry",
            getName (){
                setTimeout(
                    ()=>{
                        console.log(this.name);
                    }
                )
            }
        }

        user1.getName();
        user2.getName();
    </script>
</body>
</html>