以构造函数和原型法重新实现定时器封装

最新推荐文章于 2024-08-01 13:54:16 发布

转载最新推荐文章于 2024-08-01 13:54:16 发布 · 63 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lightsong/p/3724469.html

文章标签：

#javascript #java #ViewUI

本文详细介绍了如何使用JavaScript中的构造函数和原型方法实现定时器封装，包括构造函数的使用、构造函数改造出定时器以及原型方法优化定时器实现的过程。通过实例展示了如何创建具有不同回调函数和超时时间的定时器，以及如何使用这些定时器进行计时。

　　上篇文章实现了“使用工厂模式和闭包实现定时器封装”，

http://www.cnblogs.com/lightsong/p/3703045.html

本文记录以构造函数和原型法对其重新实现。

构造函数

　　创建对象，包括定义 var obj = {}、工厂创建、和构造函数。

工厂创建即在创建函数中，定义对象，并给对象赋属性和方法，最后return出此对象。

构造函数，类似Java中类的构造函数，函数中，使用this.xxx 来定义属性和方法，此处的this表示实例化时候的对象，

实例化语句 var obj = new constructor(args)。

构造函数改造出定时器

　　直接上代码，即在所有的属性和方法前添加this., 实现的功能与工厂一致：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
    <label>timer msg :</label> </br>
    <textarea id="timer_msg" style="width:500px; height:300px"></textarea>
    <script>
    $.fn.extend({printMsg : function(msg){
         var oldmsg = $(this).val();
         var newmsg = oldmsg + "\n" + msg;
         $(this).val(newmsg);
    }});
    
    var __nativeST__ = window.setTimeout;
    window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };
    
    function timer(fnAlarmIn, options)
    {
        /* external settable */
        this.timeout = 1000;
        this.fnAlarm = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() 
                + "-please add custom fnAlarm")
        };
        
        /* inner maintain variable */
        this.timerHandle;
        this.timerObj;
        
        /* set external variable */
        if ( fnAlarmIn )
        {
            this.fnAlarm = fnAlarmIn;
        }

        if ( options && options.timeout )
        {
            this.timeout = options.timeout;
        }
        
        this.start = function(){
            this.timerHandle = setTimeout.call(this, function(){
                $("#timer_msg").printMsg(this.getTimerID() + "-->timer triggered");
                this.fnAlarm.call(this);
                delete this.timerHandle;
            }, this.timeout);
            $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer started");
        };
        
        this.stop = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer stoped");
            clearTimeout(this.timerHandle)
            delete this.timerHandle;
        };
        
        this.getTimerID = function(){
            return this.timerHandle;
        };
    }

    var timer1 = new timer();
    timer1.start();
    timer1.stop();
    
    var timer2 = new timer(function(){
        $("#timer_msg").printMsg("timer custom alarm");
    }, {timeout:2000});
    timer2.start();
    
    var timer3 = new timer(function(){
        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");
    }, {timeout:3000});
    timer3.start();
    
    var timer4 = new timer(function(){
        $("#timer_msg").printMsg(this.getTimerID()+"-timer custom alarm");
    }, {timeout:4000});
    timer4.start();
    </script>
    </body>
</html>

　　构造函数中定义对象的方法，为每个对象独有，实际上此方法应该属于每个对象共有。

一来浪费内存，二来不符合对象行为抽象的逻辑。此问题就需要原型方法解决。

原型方法

　　原型 prototype，就是定义构造函数中，对象公共方法的手段，

例如原型为 function constructor(){}; constructor.prototype.hello = function(){console.log("hello")}

则任何实例化的对象 var a = new constructor(); 都可以调用 a.hello();

原型方法优化构造函数实现的定时器

　　直接上代码，功能与构造函数一致：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
    <label>timer msg :</label> </br>
    <textarea id="timer_msg" style="width:500px; height:300px"></textarea>
    <script>
    $.fn.extend({printMsg : function(msg){
         var oldmsg = $(this).val();
         var newmsg = oldmsg + "\n" + msg;
         $(this).val(newmsg);
    }});
    
    var __nativeST__ = window.setTimeout;
    window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };
    
    function timer(fnAlarmIn, options)
    {
        /* external settable */
        this.timeout = 1000;
        this.fnAlarm = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() 
                + "-please add custom fnAlarm")
        };
        
        /* inner maintain variable */
        this.timerHandle;
        this.timerObj;
        
        /* set external variable */
        if ( fnAlarmIn )
        {
            this.fnAlarm = fnAlarmIn;
        }

        if ( options && options.timeout )
        {
            this.timeout = options.timeout;
        }
    }

    timer.prototype.start = function(){
        this.timerHandle = setTimeout.call(this, function(){
            $("#timer_msg").printMsg(this.getTimerID() + "-->timer triggered");
            this.fnAlarm.call(this);
            delete this.timerHandle;
        }, this.timeout);
        $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer started");
    };
    
    timer.prototype.stop = function(){
        $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer stoped");
        clearTimeout(this.timerHandle)
        delete this.timerHandle;
    };
    
    timer.prototype.getTimerID = function(){
        return this.timerHandle;
    };
    
    var timer1 = new timer();
    timer1.start();
    timer1.stop();
    
    var timer2 = new timer(function(){
        $("#timer_msg").printMsg("timer custom alarm");
    }, {timeout:2000});
    timer2.start();
    
    var timer3 = new timer(function(){
        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");
    }, {timeout:3000});
    timer3.start();
    
    var timer4 = new timer(function(){
        $("#timer_msg").printMsg(this.getTimerID()+"-timer custom alarm");
    }, {timeout:4000});
    timer4.start();
    </script>
    </body>
</html>