Error in prototyping Javascript "Class" - not a function and undefined variable

时间:2016-04-12 15:28:21

标签: javascript class oop

I am writing a Javascript class to cycle through a number of ticks and call a function at specified ticks. However, I am having a problem with my prototyping of the Javascript Class. The main count variable appears as undefined or Nan and one of the functions (methods) is apparently "not a function". Am just perplexed. Any pointers would be great.

Here is a JSFiddle: https://jsfiddle.net/hp5dj665/的值,但以下是相关代码:

<script>
function tickStep(tickInMilliSeconds){
        this.tickCount = 0; //just used as a counter
        this.tickMax = 48; //highest number of ticks before it ends
        this.monitorTextInputId = "";
        this.paused = false;
        this.tickMilliSeconds = tickInMilliSeconds;
        this.tickRepeat = true; //when reaching the end start again at the beginning
        this.eventArray = new Array();
        this.setint; //the set time out variable      
    }

    tickStep.prototype = {
        constructor: tickStep,

        monitorTick:function(){
            console.log(this.tickCount);
        /*  if(this.monitorTextInputId.length>0){
                document.getElementById(this.monitorTextInputId).value = this.tickCount;
            }*/
        },

        tick:function(){
            if(!this.paused){                   
                console.log("HERE: "+this.tickCount); // WHY IS THIS NaN ??? <---------------
                this.tickCount++;
                if(this.tickCount>this.tickMax && this.tickRepeat){
                    this.tickCount = 0;
                }
                 console.log("tick: "+this.tickCount);
                if(this.tickCount>this.tickMax && !this.tickRepeat){
                    this.stop();
                    return false;
                }
                this.monitorTick(); // <!----------------- WHY DOES THIS SAY IT IS NOT A FUNCTION?
                if(typeof this.eventArray[this.tickCount] !== "undefined"){
                    if(this.isAFunction(this.eventArray[this.tickCount])){
                        eval(this.eventArray[this.tickCount]);
                    }
                }
            }else{
                console.log("Paused...");
            }
        },

        isAFunction:function(functionalCall){
            if(functionName.indexOf("(")){ //remove the brackety stuff
                functionName = functionName.substring( 0,functionName.indexOf("(") );                   
            }
            console.log("Testing for function: "+functionName);
            return typeof(functionName) === typeOf(Function);
        },

        start:function(){
            console.log("STARTING");
            if(!this.tickMilliSeconds>0){
                this.tickMilliSeconds = 1000; //default to 1 second
                console.log("defaulting to 1 tick = 1000ms")
            }
            console.log("Tick duration: "+this.tickMilliSeconds);
            this.setint = window.setInterval(this.tick,this.tickMilliSeconds);
        },

        stop:function(){
            console.log("STOPPING");        
            clearInterval(this.setint);
        },

        restart:function(){
            console.log("RESTARTING");
            this.stop();
            this.tickCount =0;
            this.start();
        },

        pause:function(){
            this.paused = !this.paused;
        },

        addEvent:function(tickValue,funcCall,params){
            this.eventArray[this.tickValue] = funcCall+"("+params+")";
        },

        removeEvent:function(tickValue){
            this.eventArray[this.tickValue] = null; 
        }

    } //end of tickStep prototype



    var seq = new tickStep();
    seq.monitorTextInputId = "tb";

    var myFunction = function(){
        console.log("myFunctionCalled");
    }

    seq.addEvent(2,myFunction,"");
  seq.start();

</script>

所以 1.为什么Tick函数中的“this.tickCount”== Nan或undefined 2.当this.tick()是函数时,为什么this.monitorTick()显然不是函数?

之后东西可能会破坏,因为我无法超越那个阶段 - 但我希望这两个问题能够解决,以便我能够进步。感谢

更新

为了完整起见,按照我想发布的几条评论,我现在发布了addEvent函数:

        addEvent:function(tickValue,funcCall,params){
            this.eventArray[tickValue] = Array(funcCall,params);                
        },

现在打勾:

     tick:function(){
            if(!this.paused){                   
                this.tickCount++;
                if(this.tickCount>this.tickMax && this.tickRepeat){
                    this.tickCount = 0;
                }
                if(this.tickCount>this.tickMax && !this.tickRepeat){
                    this.stop();
                    return false;
                }
                this.monitorTick();
                if(typeof this.eventArray[this.tickCount] != "undefined"){
                    this.eventArray[this.tickCount][0](this.eventArray[this.tickCount][1]);
                }
            }else{
                console.log("Paused...");
            }
        },

在setInterval调用上绑定“this”解决了初始问题。谢谢大家。

1 个答案:

答案 0 :(得分:1)

我猜是因为tick函数由setInterval调用,因此不绑定到该对象。尝试

this.setint = window.setInterval(this.tick.bind(this),this.tickMilliSeconds);

详细了解JavaScript here

this的含义