js中this作用域引发的惨案

function MultiTimeOut(count, timer, cb){
	var c = count > 1 ? count : 1
	var s = false

	this.run = function(){
		if(c > 0 && !s){
			cb()
			c--
			setTimeout(this.run, timer)
		}
	}
	 
	this.stop = function(){
		s = true
	}

	this.reset = function(){
		c = 1
		s = false
	}
}

先看这段代码吧,定义了一个构造函数,在函数中指定重复次数,时间间隔和回调函数(要执行的操作),调试中却发现无论count设置成多少,回调函数都只能执行2次,妈蛋~~从函数定义到调用看了一遍又一遍,逻辑似乎没问题,调用方法也没错,那问题到底出在哪里呢?

聪明如你,估计已经从标题猜出了什么~~

没错,在run函数中打印this,第一次指向的是MultiTimeOut自身,符合初衷,但第二次打印出来,这个this却指向了window对象,这是this.run=window.run,但页面中并未定义run方法,所以这时的this.run=undefined,函数自然就在这里终止无法进行下去了

找到问题就好解决了,既然是this的问题,那就换个思路,this的作用域会转移,那就在函数内部维护一个变量指向函数本身不就可以了吗,本着这个思路,修改代码

function MultiTimeOut(count, timer, cb){
	var c = count > 1 ? count : 1
	var s = false
	var cc = this

	this.run = function(){
		if(c > 0 && !s){
			cb()
			c--
			setTimeout(cc.run, timer)
		}
	}
}

测试通过!

在这个问题上浪费了两个小时的时间,说到底还是对变量作用域这些基础知识掌握的似是而非不够扎实,出现问题也未能使用有效手段快速定位问题,矫情话没啥好说,趁着最近正在研究nodejs的机会,把js的语法基础好好学习和梳理一下。

时间: 2024-11-08 22:55:53

js中this作用域引发的惨案的相关文章

PHP和JS中变量作用域

一,PHP中变量作用域 对于大多数PHP的变量只有一个作用域.在用户自定义函数里采用局部变量作用域.所有的函数内使用的变量被设置为局部变量.例如: <?php $a=1; function test() { echo $a; } test(); ?> 这段程序不会输出任何的东西因为echo语句要输出局部变量 $a ,而函数内的 $a 从未被赋过值.你可能注意到和C语言有点小小的区别,C中全局变量可以直接在函数内引用,除非它被一个局部变量所覆盖.因为这使得人们可能不注意修改了全局变量的值.在PH

js中的作用域链

js中的执行环境: 所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据 ,决定了它们各自的行为.而每个执行环境都有一个与之相关的变量对象,环境中定义的所有变量和函数都保存在这个对象中. js中的作用域链: 每个函数都有自己的执行环境,当代码在执行环境中执行时,就会创建变量对象的作用域链.作用域链保证了对执行环境有权访问所有变量和函数的有序访问.作用域链的前端,始终都是当前执行的代码所在的环境的变量对象,如果环境是一个函数,那么它的

JS中的作用域和闭包

作用域:在编程语言中,作用域控制着变量与参数的可见性及生命周期.JS确实有函数作用域,那意味着定义在函数中的参数和变量在函数外部是不可见的,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的. var a = 1; var fs = function (){ var b = 2; var c = 4 var fun = function (){ var c = 3; alert(a) //输出1 alert(b) //输出2 alert(c) //输出3 } fun(); } f

理解js中的作用域以及初探闭包

前言 对于js中的闭包,无论是老司机还是小白,我想,见得不能再多了,然而有时三言两语却很难说得明白,反正在我初学时是这样的,脑子里虽有概念,但是却道不出个所以然来,在面试中经常会被用来吊自己的胃口,考察基础,虽然网上自己也看过不少相关闭包的文章,帖子,但貌似这玩意,越看越复杂,满满逼格高,生涉难懂的专业词汇常常把自己带到沟里去了,越看越迷糊,其实终归结底,用杨绛先生的一句话就是:"你的问题在于代码写得太少,书读得不够多",其实在我看来前者是主要的,是后者的检验, 自知目标搬砖20年(还

聊一下JS中的作用域scope和闭包closure

scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久,无论看别人如何解释,就是不通.不过理越辩越明,代码写的多了,小程序测试的多了,再回过头看看别人写的帖子,也就渐渐明白了闭包的含义了.咱不是啥大牛,所以不搞的那么专业了,唯一的想法就是试图让你明白什么是作用域,什么是闭包.如果看了这个帖子你还不明白,那么多写个把月代码回过头再看,相信你一定会有收获:如果看这个帖子让你收获到了一些东西,告诉我,还是非常

js中的作用域和作用域链

作用域1. 全局作用域2. 函数作用域这里扯出来下js的函数声明和变量声明提升,直接来两段代码 if (!a in window) { var a = 1; } console.log(a) //undefined 嗯,为什么呢?因为var声明的变量会变量声明提升,所以相当于执行if判断的时候a变量已经声明过了,而此时a是一个全局变量既是window对象的一个属性,所以这里压根没有进if判断,所以这里打印出来的是undefined再来一段坑坑的代码 (function (){ var a = b

Js中函数作用域问题

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

JS中this作用域的问题:常见报错:XXX function 或者变量 未定义

场景:定义了全局的函数,但是使用的时候,报错XXX 函数或者变量未定义,但实际上js中明明已经定义了且正确 问题原因:大多数是因为调用过程中this.functionname 或者this.varname中this指向的作用域问题 解决办法:在调用函数中,函数体最外层添加this指代,var self=this: 调用的函数中 : functionA(){ var self=this;  //函数体最外层定义this指代 if(){ self.functionB();   //第二层,可以正常使

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

本人学习js时间并不长,前几天,写一段js代码时,在js指定一个按钮事件的匿名函数中加入一个同级函数,具体代码可见如下: var mainOb=document.getElementById("divObject");                                        var start=document.getElementById("start"); var a=10; start.onclick=funcrion(){ functi