javascript - Javascript 原型(prototype)设计错​​误 "Class"- 不是函数且 undefined variable

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

我正在编写一个 Javascript 类来循环多个刻度并在指定的刻度处调用函数。但是，我的 Javascript 类原型(prototype)设计遇到了问题。主计数变量显示为未定义或 Nan，并且其中一个函数(方法)显然“不是函数”。我只是很困惑。任何指示都会很棒。

这是一个 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或者undefined2. 为什么 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 调用上绑定(bind)“this”解决了最初的问题。谢谢大家。

Answer 1

我猜测是因为 tick 函数是由 setInterval 调用的，因此未绑定(bind)到该对象。尝试一下

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

详细了解 JavaScript 中 this 的含义 here