带参数"this"函数

Question

我有一个类机器人，定义如下。但是由于某种原因，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]);
            }
        }
    }
}
}

Answer 1

我相信

你的事件处理程序（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()，并且可以在事件处理程序中调用它。

Answer 2

使用旧的that=this技巧：

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]);
            }
        }
    }
}
}

Answer 3

这是很多代码，可以快速浏览并推测答案。但是，this错误通常是由于this没有您认为应有的值而导致的。

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

var self = this;

然后直接使用 self 而不是this。