JavaScript ：箭头函数对比闭包函数

Mars-xq

已于 2023-08-28 09:20:56 修改

阅读量57

点赞数

文章标签： javascript 开发语言 ecmascript

于 2020-06-03 10:44:38 首次发布

本文链接：https://blog.csdn.net/sinat_31057219/article/details/106519221

版权

参考：

闭包可以让你从内部函数访问外部函数作用域

箭头函数相当于匿名函数，简化了函数的定义

测试

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="root">

</div>

<!--
箭头函数 => 对比 闭包函数
-->

<script>

    let obj = {
        birth: 1990,
        getAge1: function () {
            let b1 = this.birth; // 1990
            console.log(`b1====${b1}`);
            //箭头函数 是在es6 中添加的一种规范
            //箭头函数相当于 匿名函数， 简化了函数的定义。
            //箭头函数修复了this的指向， this 总是指向词法作用域， 也就是外层调用者obj:
            let fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        },
        getAge2: function () {
            let that = this;
            let b2 = this.birth; // 1990
            console.log(`b2====${b2}`);

            /** function写法一 */
            let fn1 = function () {
                return new Date().getFullYear() - that.birth
            };
            console.log(`fn1=========${fn1()}`);

            /** function写法二 */
            function fn2() {
                return new Date().getFullYear() - that.birth
            } // that 指向obj对象
            console.log(`fn2=========${fn2()}`);

            /** function写法三 ： 闭包
             * 闭包（函数）指的是：能够访问另一个函数作用域的变量的函数。
             * */
            function fn3() {
                let date = new Date().getFullYear();

                function inner() {
                    return date - that.birth
                }
                //调用inner方法
                return inner()
            }
            console.log(`fn3=========${fn3()}`);

            /** function写法四 ： 闭包 */
            function fn4() {
                let date = new Date().getFullYear();
                //返回一个方法
                return function () {
                    return date - that.birth
                }
            }
            //注意fn4返回的是一个方法，需要调用方法需要再加个括号
            console.log(`fn4=========${fn4()()}`);

            return fn3();
        }
    };
    console.log(obj.getAge1()); //
    console.log(obj.getAge2()); //


    new Vue({
        el: "#root",
    })
</script>
</body>
</html>