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

本人学习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的。

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

时间: 2024-12-23 09:24:23

浅谈js中函数作用域问题(一)的相关文章

浅谈js中函数作用域和声明提前

JavaScript的函数具有两个主要特性,一是函数是一个对象,二是函数提供作用域支持,今天主要聊聊函数的作用域支持. 简单看两个概念: 具名函数表达式 var add = function add (a) { return a } 这段代码描述了一个函数,称为‘具名函数表达式’. 如果省略函数表达式中的名字,它就是‘匿名函数表达式’,即匿名函数,例如 var add = function (a, b) { return a + b; }; 最后看下‘函数声明’ function foo() {

浅谈js中的this关键字

浅谈js中的this关键字 全局作用域中的this 函数作用域中的this 不同函数调用方法下的this 直接调用 作为对象的方法调用 作为构造函数调用 通过call或apply方法调用 嵌套函数作用域中的this 浅谈js中的this关键字 this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用. 全局作用域中的this 本文将以作用域由

浅谈javascript中的作用域

所谓的作用域,可以简单理解为一个可以读.写的范围(区域),有些js经验的同学可能会说:"js没有块级作用域",js除了全局作用域外,只有函数可以创建作用域.作用域的一个好处就是可以隔离变量. 我们通过一些例子来帮助我们理解js中的作用域. 1 alert(a); 2 var a = 1; 如果对作用域一点不了解的同学可能会说 alert的是1或者报错:但实际上是undefined: 说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作, js在逐行读代码之前,会做一些“预解析”

Js中函数作用域问题

var a="111"; function fn(){ alert(this.a);} function fn2(){ var a="222" fn();//输出是111,而不是222} js中函数的作用域取决于定义它的地方而不取决于执行他的地方.

浅谈js回调函数

回调函数原理: 我现在出发,到了通知你”这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程 例子 1.基本方法 ? 1 2 3 4 5 6 7 8 9 10 11 12 <script language="javascript" type="text/javascript"> function doSomething(callback) { // … // Call the

浅谈js中arguments对象

一.先来看看到底是个啥? arguments对象在JS中应该算数比较特殊的对象.不能显示的创建,只在当前函数调用的时候才可以使用,长得有点像数组,但绝对不是Array的实例. 几点说明: 1.1.arguments实际上是当前函数的一个内置属性,在当前函数内,函数名.arguments等价于arguments,在函数外单独使用arguments是没有意义的; 1.2.arguments对象的长度由实际参数个数决定.1.3.函数中的形参和实参是可以相互影响的. 可以看出,当传入的实参个数少于形参个

浅谈js中继承的理解和实现

一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例的属性和行为是由构造函数和原型两部分组成的,js的继承也分为这两部分.下面给大家分享一下在js中如何实现继承,讲的不对的地方望大家指正! 二.继承构造函数中的属性和行为 我们定义两个类Animal和Bird类,来实现js中类的继承. //定义Animal类 function Animal(name)

浅谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V上与应用程序交互 2.控制器C触发相应的事件,要求模型M改变状态(读写数据) 3.模型M将数据发送到视图V,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事件),用来驱动模型和模型结合 所以js

浅谈js中的数据类型,使用typeof获取js数据类型

JS中的数据类型 1):Undefined——值未定义 注:Undefined类型只有一个值,即特色的undefined.在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined 2):boolean——布尔值 注:true和false是区分大小写的.也就是说,True和False(以及其他的混合大小写形式)都不是Boolean值,只是标识符 3):string——字符串 注:用双引号和单引号表示的字符完全相同 4):number——数值 注:表示整数和浮点数值 5):Nul