“this”函数带参数

时间:2013-09-09 18:54:47

标签: javascript

我有一个如下定义的类机器人。但由于某种原因,processCommand函数出错,我无法弄清楚它是什么。这是唯一一个带参数的函数,所以我想知道我在readCommands函数中传递它的方式是否有问题?

感谢任何帮助或意见!

function Robot(pos){
this.pos = pos;
this.language;

this.printCoords = function(){}

this.setLanguage = function() {}

this.setPos = function() {}

this.processCommand = function(s){

    var direction = this.pos[2];
    direction = direction.replace(" ", "");

    if( (s.match('V') && this.language.match("svenska")) ||
        (s.match('L') && this.language.match("engelska")) ){
            switch(direction){
                case "N":
                    // Look West
                    this.pos[2] = " W";
                    break;
                case "E":
                    // Look North
                    this.pos[2] = " N";
                    break;
                case "S":
                    // Look East
                    this.pos[2] = " E";
                    break;
                case "W":
                    // Look South
                    this.pos[2] = " S";
                    break;
                default:
                    break;
            }       
    }
    else if( (s.match('H') && this.language.match("svenska")) ||
             (s.match('R') && this.language.match("engelska")) ){
                switch(direction){
                case "N":
                    // Look East
                    this.pos[2] = " E";
                    break;
                case "E":
                    // Look South
                    this.pos[2] = " S";
                    break;
                case "S":
                    // Look West
                    this.pos[2] = " W";
                    break;
                case "W":
                    // Look North
                    this.pos[2] = " N";
                    break;
                default:
                    break;
            }       
    }
    else if( (s.match('G') && this.language.match("svenska")) ||
             (s.match('F') && this.language.match("engelska"))){
            switch(direction){
                case "N":
                    // Walk North
                    this.pos[1] += 1;
                    break;
                case "E":
                    // Walk East
                    this.pos[0] += 1;
                    break;
                case "S":
                    // Walk South
                    this.pos[1] -= 1;
                    break;
                case "W":
                    // Walk West
                    this.pos[0] -= 1;
                    break;
                default:
                    break;
            }           
    }
    this.printCoords();
}

this.readCommands = function() {
    document.getElementById("textField").onkeyup = function(key){

        key = window.event;
        keyCode = key.keyCode || key.which;
        if(keyCode == '13'){
            var commandString = document.getElementById("textField").value;

            for(var i = 0; i < commandString.length; i++){
                this.processCommand(commandString[i]);
            }
        }
    }
}

}

3 个答案:

答案 0 :(得分:0)

我相信您的事件处理程序(function(key){})没有按照您的意愿执行。

这是因为在事件处理程序调用的上下文中,this通常是指发生事件的DOM元素,而不是Robot的实例。

请尝试使用此代码:

this.readCommands = function() {
    var that = this;

    document.getElementById("textField").onkeyup = function(key){

        key = window.event;
        keyCode = key.keyCode || key.which;
        if(keyCode == '13'){
            var commandString = document.getElementById("textField").value;

            for(var i = 0; i < commandString.length; i++){
                that.processCommand(commandString[i]);
            }
        }
    }
}

这样,您可以存储对要调用方法processCommand()的实际对象的引用,并可以在事件处理程序中调用它。

答案 1 :(得分:-1)

使用旧的=这个技巧:

function Robot(pos){
this.pos = pos;
this.language;

this.printCoords = function(){}

this.setLanguage = function() {}

this.setPos = function() {}


this.processCommand = function(s){

    var direction = this.pos[2];
    direction = direction.replace(" ", "");

    if( (s.match('V') && this.language.match("svenska")) ||
        (s.match('L') && this.language.match("engelska")) ){
            switch(direction){
                case "N":
                    // Look West
                    this.pos[2] = " W";
                    break;
                case "E":
                    // Look North
                    this.pos[2] = " N";
                    break;
                case "S":
                    // Look East
                    this.pos[2] = " E";
                    break;
                case "W":
                    // Look South
                    this.pos[2] = " S";
                    break;
                default:
                    break;
            }       
    }
    else if( (s.match('H') && this.language.match("svenska")) ||
             (s.match('R') && this.language.match("engelska")) ){
                switch(direction){
                case "N":
                    // Look East
                    this.pos[2] = " E";
                    break;
                case "E":
                    // Look South
                    this.pos[2] = " S";
                    break;
                case "S":
                    // Look West
                    this.pos[2] = " W";
                    break;
                case "W":
                    // Look North
                    this.pos[2] = " N";
                    break;
                default:
                    break;
            }       
    }
    else if( (s.match('G') && this.language.match("svenska")) ||
             (s.match('F') && this.language.match("engelska"))){
            switch(direction){
                case "N":
                    // Walk North
                    this.pos[1] += 1;
                    break;
                case "E":
                    // Walk East
                    this.pos[0] += 1;
                    break;
                case "S":
                    // Walk South
                    this.pos[1] -= 1;
                    break;
                case "W":
                    // Walk West
                    this.pos[0] -= 1;
                    break;
                default:
                    break;
            }           
    }
    this.printCoords();
}

var that=this;

this.readCommands = function() {
    document.getElementById("textField").onkeyup = function(key){

        key = window.event;
        keyCode = key.keyCode || key.which;
        if(keyCode == '13'){
            var commandString = document.getElementById("textField").value;

            for(var i = 0; i < commandString.length; i++){
                that.processCommand(commandString[i]);
            }
        }
    }
}

}

答案 2 :(得分:-1)

这是很多代码,可以快速浏览并推测答案。但是,this错误通常是因为this没有您认为应该具有的价值。

重要的是要认识到this的值会根据函数的调用上下文而改变。解决这类错误的典型解决方案是将this的值存储在稍后可以引用的变量中,即;

var self = this;

然后直接使用self代替this