码迷,mamicode.com
首页 > Web开发 > 详细

浅谈js中函数作用域问题(一)

时间:2015-09-23 20:58:17      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

  本人学习js时间并不长,前几天,写一段js代码时,在js指定一个按钮事件的匿名函数中加入一个同级函数,具体代码可见如下:

          

                                        var mainOb=document.getElementById("divObject");
                                        var start=document.getElementById("start");

                                         var a=10;

                                        start.onclick=funcrion(){

                                        function baseFoot(){
                                         mainOb.style.left=a+"px";
                                        a=a+10;

                                        if(a==1200){
                                        a=10;
                                          }
                                        setTimeout("baseFoot()",1000);
                                         }

                                       }

   在这段代码中,是不能执行的,我查错很久,发现没有逻辑错误,我本能察觉到可能是作用域问题或者是事件流错误,请教别人后,我才知道是因为,在匿名函数中定义的baseFoot()函数是一个很危险的做法,这里把这个匿名函数看成一级函数,basefoot()是在其作用域内的二级函数,执行时这里内嵌的函数作用域会和其父级函数作用域链在一起作为一个整体函数作用域,想要像上面setTimeout()里单独调用baseFoot()(匿名函数中的二级函数)函数是行不通的,想要调用baseFoot()有两种方法,第一种是调用其父级函数,这里是onclick事件的匿名函数,不好直接调用,但可以把二者分开,如下:

                                     function baseFoot(){ 
                                         mainOb.style.left=a+"px";
                                        a=a+10;

                                        if(a==1200){
                                        a=10;
                                          }
                                        setTimeout("baseFoot()",1000);
                                         }

                                     start.onclick=function(){

                                         baseFoot();

                                      }

           这样是可以运行的。

 

;第二种是自调方式,如下:

                           

                                        var mainOb=document.getElementById("divObject");
                                        var start=document.getElementById("start");

                                         var a=10;

                                        start.onclick=function(){                                       

                                         setInteval( functiont(){ 

                                         mainOb.style.left=a+"px";
                                         a=a+10;

                                         if(a==1200)
                                          a=10;

                                        },1000);

                                       }

                          这样也是ok的。

          这是我在博客园上的第一篇博客,所见之处可能浅薄甚至错误之处,只望有抛砖引玉的效果,还望大神们能指点一二,我就觉得十分值得了,前端路长,诚心交友互相学习,共同进步。如有想法,可以加给本人发发邮件,地址是:1667582186@qq.com,有信必回!
                                          
                                       

                                     

                 

浅谈js中函数作用域问题(一)

标签:

原文地址:http://www.cnblogs.com/zhu-xingyu/p/4833239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!