`

在面向对象中使用setTimeout

阅读更多
引自:http://blog.csdn.net/free_wind22/archive/2008/03/28/2224363.aspx

尝试实现注释部分的 Javascript 代码,可在其他任何地方添加更多
代码(如不能实现,说明一下不能实现的原因):

var Obj = function(msg)...{
this.msg = msg;
this.shout = function()...{
alert(this.msg);
}

this.waitAndShout = function()...{
// 隔五秒钟后执行上面的 shout 方法
}
}

var testObj = new Obj("Hello,World!");
testObj.shout();
坦白的说,之前我并没有在 Javascript 类中使用 setTimeout/setInterval 的经验,所以开始就很草率的认为这是无法实现的。但是经过深思熟虑以后发现是可以实现的。退一步说,隔五秒执行某段语句是非常容易实现的。比如不考虑别的因素,题目中的函数是可以这样写:

this.waitAndShout = function()...{
setTimeout('this.shout()', 5000);
}
在运行以后,谁都会意识到 this 这个变量是无法找到的。但是这是为什么呢,很快就可以意识到,其实 setTimeout/setInterval 是 window 对象的一个方法,所以也可以写成 window.setTimeout/window.setInterval,那么上述的 this.shout() 就非常可以容易理解为什么不能执行了,因为它实际上调用的是 window.shout() 。

知道了原因以后解决起来就非常的容易了,只要将对象绑定到 window 对象下就可以(我对 Javascript 有趣的对象机制感到兴奋)。那么,上述的函数再做一个小的修改:

this.waitAndShout = function() ...{
window.Obj = this;
setTimeout('Obj.shout()', 5000);
}
这样就可以了。实际上

setTimeout('Obj.shout()', 5000);
等价于

window.setTimeout('window.Obj.shout()', 5000);



另一种方法:

var Obj = function(msg)...{
this.msg = msg;
this.shout = function() ...{
alert(this.msg);
this.waitAndShout();
}

var _self = this;
this.waitAndShout = function() ...{
setTimeout(function()...{_self.shout()}, 5000);
}
}

var testObj = new Obj("Hello,World!");
testObj.shout();



改进的另一种方法:

闭包是对的,但要避免循环中产生匿名函数

var Obj = function(msg)...{
this.msg = msg;
var _self=this;
var shout=this.shout = function() ...{
alert(_self.msg);
_self.waitAndShout();
}

this.waitAndShout = function() ...{
setTimeout(shout, 1000);
}
}

var testObj = new Obj("Hello,World!");
testObj.shout();



方法改进:

<script language="javascript">   
/**//**//**//*  
    功能:修改 window.setTimeout,使之可以传递参数和对象参数  
    使用方法: setTimeout(回调函数,时间,参数1,,参数n)  
*/  
var __sto = setTimeout;   
window.setTimeout = function(callback,timeout,param)...{   
    var args = Array.prototype.slice.call(arguments,2);   
    var _cb = function()...{   
        callback.apply(null,args);   
    }   
    __sto(_cb,timeout);   
}   
  
///测试代码   
function aaaa(a)...{   
    alert(a);   
}   
  
function aaaaa(a,b,c)...{   
    alert(a + b + c);   
}   
  
var a = new Object();   
window.setTimeout(aaaa,1000,a);   
window.setTimeout(aaaaa,2000,a,6,7);   
</script>  
分享到:
评论

相关推荐

    原生js-面向对象-特效-幻灯片片.zip

    在本项目中,我们主要探讨如何使用原生JavaScript和面向对象编程思想来创建一个PC端的幻灯片特效。这个“原生js-面向对象-特效-幻灯片片.zip”文件包含了一个实现这一功能的代码示例。下面将详细解释相关知识点。 1...

    小游戏JavaScript面向对象编程贪吃蛇

    在这个名为"小游戏JavaScript面向对象编程贪吃蛇"的项目中,我们将深入探讨如何利用JavaScript的面向对象特性来实现经典的贪吃蛇游戏。 贪吃蛇游戏的核心概念包括蛇、食物、边界和游戏状态。在JavaScript中,我们...

    js面向对象简单编程[文].pdf

    在JavaScript中,类的定义并不像其他一些面向对象的语言(如Java或C#)那样直接使用关键字。我们可以使用函数来模拟类的行为。例如: ```javascript function Class1() {} ``` 这里的`Class1`就是一个构造函数...

    JS基于面向对象实现的放烟花效果

    在JS中实现面向对象,常用到构造函数和原型链。构造函数用于创建具有共同属性和方法的对象实例,而原型链则用于为对象实例共享方法和属性。在放烟花效果的示例代码中,FireWorks函数作为构造函数,用于生成烟花对象...

    Javascript对象中关于setTimeout和setInterval的this介绍

    但是,在面向对象编程中,我们经常会在对象的方法中使用setTimeout或setInterval,这时就会遇到一个问题,即在异步执行的回调函数中,this的指向并不如我们所愿地指向当前对象。 首先,我们要知道,在JavaScript中...

    setTimeout在类中使用的问题!

    但在面向对象编程中,尤其是在类(Class)的上下文中使用 `setTimeout` 时,经常会遇到一个棘手的问题:`this` 的指向问题。 本篇文章将详细介绍 `setTimeout` 在类中使用时遇到的问题,并提供几种解决方案,帮助...

    JS中的this变量的使用介绍

    ion(){ console.log(this.x);...理解并熟练运用this是掌握JavaScript面向对象编程的关键,也是解决许多复杂问题的基础。在实际开发中,根据不同的场景选择合适的方式来处理this,可以避免很多不必要的困扰。

    JavaScrip asp.net显示动态时间

    C# 语言是一种面向对象的编程语言,具有强大的编程功能。ASP.NET 和 C# 结合使用可以开发出功能强大且高效的 web 应用程序。 动态显示时间 要在 ASP.NET 网页中动态显示时间,需要使用 JavaScript 语言来实现。...

    JavaScript面向对象框架dejavu.js.zip

    dejavu 在JavaScript原型继承的基础上提供了经典的继承形式,使得其他语言开发者可以轻松转向JavaScript。dejavu 主要特性:类(具体的、抽象的、final类)接口混入(这样你可以使用某种形式的多重继承)私有成员和...

    jquery实现烟花效果(面向对象)

    在本例中,烟花效果是通过面向对象的方式来实现的,代码中定义了一个名为 `fireWorks` 的对象,并给它添加了多个方法来完成烟花的展示。 #### 2. jQuery的使用 jQuery是一个快速、小巧、功能丰富的JavaScript库,它...

    JavaScript进阶面试题_30题.pdf_前端面试题

    面向对象编程是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。面向对象编程以功能来划分问题,而不是步骤。 3. 异步编程的实现方式:有...

    js代码-setTimeout this指向问题

    当在函数内部使用`setTimeout` 并传递一个方法作为第一个参数时,`this`的值在回调函数被调用时不再指向原来的方法所属的对象,而是指向全局对象(在浏览器环境中通常是`window`)。这可能导致预期行为的丢失,特别...

    JS基于面向对象实现的多个倒计时器功能示例

    在JavaScript中,面向对象编程是一种常见的编程范式,它允许我们通过类和对象来组织代码,提高可重用性和可维护性。在这个示例中,我们看到了如何利用面向对象技术来实现一个能够处理多个倒计时器的功能。下面将详细...

    在JavaScript中用法timer示例_.docx

    特别是在面向对象编程中,确保正确处理`this`的引用可以避免很多潜在的问题。在实际开发中,我们应该尽量避免使用字符串形式的函数调用,而应该直接传递函数引用,以确保性能和代码的清晰度。同时,利用闭包来保留`...

    常用网页使用js技巧收集(200多个)经典

    6. **面向对象编程**:JavaScript支持基于原型的面向对象编程,可以创建构造函数、实例化对象,以及使用`prototype`来扩展对象功能。ES6引入了类的概念,使得JavaScript的面向对象编程更加接近其他传统的面向对象...

    Js基础试题汇编.docx

    * 模板字符串可以多行,如果要在模板字符串中引用变量使用 ${} 四、类型转换: * 强制转换:使用 Number()、String() 等方法强制转换数据类型 * 隐式转换:使用 + 号进行字符串拼接、使用 == 运算符进行比较时隐式...

    同一页面多个商品倒计时JS 基于面向对象的javascript

    总结起来,这段代码展示了如何使用JavaScript面向对象编程来实现一个在同一页面显示多个商品倒计时的功能。通过实例化`showTime`类并调用其`setTimeShow`方法,可以为每个商品创建独立的倒计时,同时利用`setTimeout...

    javascript 俄罗斯方块

    JavaScript 俄罗斯方块是一款经典的基于JavaScript编程的游戏,它主要用于学习和实践面向对象编程中的类概念。在这款游戏中,开发者可以通过创建不同的类来实现游戏的核心功能,如方块、游戏板、分数显示等。以下是...

    JavaScript中this的使用

    总之,理解JavaScript中的`this`是掌握JavaScript面向对象编程的关键。通过对不同场景下`this`的用法进行分析,我们可以更好地控制代码中的对象引用,从而编写出更清晰、更易于维护的程序。在实际开发中,应根据需求...

Global site tag (gtag.js) - Google Analytics