作用域 匿名函数 闭包

1、闭包的结构+例题
<script type="text/javascript">

可以通过闭包 能够在外部访问到局部变量

凡是放在返回函数中的变量被提升为全局变量,驻留在内存中不释放;

function fn1(){
var a = 12;
function fn2(){
 a+=12;
 alert(a);
 }
 return fn2;
                        }
var result = fn1();
result();

自己熟悉并练习其结构的写法

                        function f1(){
                                var a = 12;
                                function f2(){
                                        a+=12;
                                        alert(a);
                                }
                                return f2;
                        }
                        var result = f1();
                        result();

实例面试题 (相关作用域考核点)

                                function f1() {    
                                var n = 999;    
                                nAdd = function() {
                                        n += 1
                                }    
                                function f2() {      
                                        alert(n);    
                                }    
                                return f2;  
                        }  
                        var result = f1();  
                        result(); // 999
                          
                        nAdd(); // 1000
                          
                        result(); // 1000;
            </script>

2、作用域的概念

<script type="text/javascript">
                        demoFn();

                        // 定义一个函数
                        function demoFn() {
                                alert("haha");
                        }

                        var fun = function demoFn1() {
                                alert("一只乌鸦口渴了,到处找水喝");
                        }
                        demoFn1();

作用域:变量的生效范围,如果变量在整个页面中都可以访问到,则该变量就是一个全局变量;如果变量的有效范围只是在某一个范围内,该变量就是一个局部变量。

在函数内部,使用var定义的变量是局部变量,除此以外,都是全局变量。没用用var定义的变量,则是一个全局变量

                    //                var a = 12;
                    //                function useA () {

因为在内部作用域中使用到了和外部作用域同名的变量,所以需要先判断内部有没有重新定义这个变量

(1):如果重新定义了,那么就是用新定义的这个变量
(2):如果没有,则该变量就是外部作用域中的变量


                                              alert(a); // undefine
                                               var a = 24;
                      
                                               return a;
                         }
                                      alert(a); // 12
                                    alert( useA() );  // 24
                                    alert(a);  // 12
                    function demoFun() {
                            alert(e);
                    }

                    demoFun();

                    var e = 23;

                    function demoFun1() {
                            alert(e);
                    }

                    demoFun1();
            </script>
3、匿名函数
<script type="text/javascript">
具名函数:有函数名,可以通过函数名来调用的一种函数;
匿名函数:没有函数名,可以通过事件调用   通过变量调用    通过自己调用;
                        //通过变量调用

                        var a = function() {
                                alert("hello world");
                        };
                        a();

函数的自执行/自调用

                        var c = "张三"
                        (function(a) {
                                alert("goodBye world" + a)
                        })
                        (c);
                        //这个括号————调用前面括号里面的函数

                        function demo() {

                        };

                        demo();
①给事件添加匿名函数

匿名函数可以当做参数来传递   
    例如下定时器

                        setInterval(function() {
                                alert("你好世界");
                        }, 30);

 匿名函数可以当做返回值返回出去
                </script>
复制代码
#### 4 使用闭包的思想解决循环添加事件(方法一)

<script type="text/javascript">

    window.onload = function () {
            for (var i = 1; i < 4; i++) {

获取到某一个按钮
var btn = document.getElementById("button"+i);

解决方法二:使用匿名函数传参、并调用该匿名函数执行,每次执行匿名函数,num变量都会用一个当前i的值

以下代码的闭包结构原理

1、先执行外层匿名函数,并给这个匿名函数传参(num这个参数相当在外层函数中定义于局部变量),调用外层函数时,内层函数的函数体并未执行,而是等到事件被触发时才执行(就相当于调用外部函数时,返回了内层函数,调用内层函数时才触发这个函数)

2、通过点击执行内层匿名函数时,就相当于在执行:通过外层函数返回的函数。

                    (function (num) {

给onclick添加的函数就相当于被外部函数返回出来的那个函数,在内部函数中使用了外部函数定义的num变量,因为要等出了外部函数作用域时才调用,所以num的变量空间会被长久持有,并不会被系统释放,因为btn是一个指针,指向了不同的按钮对象,所以就相当于给每个按钮都添加了num变量。

                            btn.onclick = function () {
                                    alert("button"+num);

}
})(i);

}
}</script>

</head>
<body>
<button id="button1" value="button1">button1</button>
<button id="button2" value="button2">button2</button>
<button id="button3" value="button3">button3</button>
</body>
</html>
复制代码
使用闭包的思想解决循环添加事件(方法二)
<script type="text/javascript">
//防止找不到bntton对象
window.onload = function() {
for(var i = 1; i < 4; i++) {
var btn = document.getElementById("button" + i);
//alert(btn);
//把btn当成对象添加新属性,对应i的值;循环一次获取相应的i的值
btn.tempNumber = i;
//点击的对象 即 对应的i的值
btn.onclick = function() {
alert("button" + this.tempNumber)
}
}
}
</script>
</head>

    <body>
            <input type="button" name="button1" id="button1" value="按钮1" />
            <input type="button" name="button2" id="button2" value="按钮2" />
            <input type="button" name="button3" id="button3" value="按钮3" />
    </body>

复制代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,302评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,232评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,337评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,977评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,920评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,194评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,638评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,319评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,455评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,379评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,426评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,106评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,696评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,786评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,996评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,467评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,043评论 2 341

推荐阅读更多精彩内容

  • 作用域:变量的的生效范围,如果变量在整个页面中额可以访问到,则该变量就是一个全局变量,如果变量只是在某一个范围内,...
    爱琴宝阅读 934评论 0 0
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,628评论 0 6
  • 1、//作用域的概念 2、 //匿名函数 3、//闭包 4、//用闭包解决
    Simon_s阅读 138评论 0 0
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,031评论 0 7
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,710评论 2 17