JS中的闭包

最新推荐文章于 2024-07-08 08:31:50 发布

一圈儿的云

最新推荐文章于 2024-07-08 08:31:50 发布

阅读量314

点赞数

分类专栏： JS 文章标签： javascript 闭包

本文链接：https://blog.csdn.net/u010865433/article/details/49821623

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS中的闭包

函数是javascript中的一等公民

闭包实例

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //javascript 保证一个函数总能访问到它所需要引用的变量
        var func = function () {
            var count = 0;
            //返回一个函数
            return function () {
                count++;
                console.info(count);
            }
        }
        var next = func();
        for (var i = 0; i < 5; i++) {
            //调用返回函数，可以获得count值
            //则 count和 返回方法 共同组成一个闭包

            next();
        }



        var whoIAm = function () {
            console.info("我总是那样盼望 盼望有一个晚上");
            //在函数中改变外部函数的引用
            whoIAm = function () {
                console.info("其实我想说，古老的夜晚和远方的音乐是永恒的,但那些都不属于我")
            }

        }
        //变脸
        whoIAm();
        whoIAm();

    </script>
</head>
<body>

    <h2 id="time" align="center"> 闭包 -- Closure</h2>
</body>
</html>

这里写图片描述

当this遇上闭包

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function outFun() {
            var funcInfo = 'example function';
            function inFunc() {
                console.info('in inFunc ' + this);
                //inFunc2(); 此时inFunc是Obj的do方法，上下文为Obj，而 inFunc2的上下文为window
                inFunc2.call(this);
            }
            function inFunc2() {
                console.info('in inFunc ' + this);
            }

           //返回一个匿名对象
            return {
                info: '匿名对象',
                do:inFunc

            }

        }
        //得到匿名对象
        var example = outFun();
        //调用inFunc()方法
        example.do();

    </script>
</head>
<body>

    <h2 id="time" align="center"> 闭包 -- Closure</h2>
</body>
</html>

不指定闭包中函数的this上下文


inFunc2();

example对象的do方法引用inFunc()函数，所以inFunc的this上下文为Object，而默认情况下，inFunc2()函数的this上下文为Window对象

这里写图片描述

 inFunc2.call(this);

将自己的this上下文，赋给调用的函数

这里写图片描述

小实例 – 级联计算器

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //定义对象
        var Cal = function (x) {
            this.info = '级联计算器';
            this.result=x;

            this.add = function (y) {
                console.info(this);
                this.result += y;
                //级联调用的关键就是，方法返回对象
                return this;
            }
            this.multi = function (z) {
                this.result *= z;
                return this;
            }
            this.equal = function (callback) {
                //回调函数
                callback(this.result);
                return this;
            }
        }
        new Cal(100).add(20).multi(2).equal(
            function (result) {
                console.info(result);
            });
    </script>
</head>
<body>

    <h2 id="time" align="center"> 闭包 --- 级联计算器</h2>
</body>
</html>