Javascript Class Variable Scope Becomes Undefined

Question

so I have a class names Session.

I declare it as:

function Session() {
}

I have a function called as: Session.prototype.parseCommand(){}.

For some reason, if I call the function as: this.parseCommand() it is declared as undeclared.

This also occurs with functions such as: this.textInput = false. On some functions, I can call it, but on others it is undefined.

What is the problem?

function Session() {
    this.textInput = null;
    this.lineGutter = null;
}
Session.prototype.parseCommand = function(command) {
    if (command === 'clear') {

    } else {
        var line = document.createElement('div');
        line.className = 'line';
        line.setAttribute('id', 'line command');
        line.innerHTML = command;
        document.getElementById('sessionLineGutter').appendChild(line);
    }
};
Session.prototype.textInputKey = function(e) {
    if (e.keyCode === 13) {
        this.parseCommand(document.getElementById('sessionText').innerHTML);
        e.preventDefault();
    }
};

Here is the full code and the error. I also notice that I cannot use this.lineGutter.appendChild(line); and instead I have to use document.getElementById('sessionLineGutter').appendChild(line). Why is this?

Thanks,

Presumably `this` isn't referring to the object that you expect it to at the point you try `this.parseCommand()`. Please show a complete example. — nnnnnn, Oct 19 '16 at 00:57
we need a lot more than that. how did you initiate the class? how did you call these function. I believe you are having issues with the way javascript assiges `this` — adrianj98, Oct 19 '16 at 00:58
`Session.prototype.parseCommand(){}` is neither valid syntax nor a call. — Bergi, Oct 19 '16 at 00:58
@CorentinCaer You still didn't show us how you were calling the `textInputKey` method — Bergi, Oct 19 '16 at 01:05
try the .bind(this) and self example on the duplicate. should solve it. — adrianj98, Oct 19 '16 at 01:08

Geeky · Accepted Answer · 2016-10-19T01:10:57.827

When any method in declared on prototype you cannot call them using this it has to be called directly through the object

function session(){
  }
session.prototype.method1=function(){
  alert("here");
  }
var sess1=new session();
sess1.method1();
//this -here refers to window object

this here refers to window(global) object

In this code snippet

function Session() {
    this.textInput = null;
    this.lineGutter = null;
}

this refers to global(window) object

you can call parsecommand method using var session1=new Session() and it can be called as session1.parseCommand and now inside parseCommand this would be Session object ,so that's why when you are trying to access this.lineGutter.appendChild(line);

It would not happen,because here it is pointing to lineGutter in Session object,but i guess you are expecting it to append to the body which does not happen here because this is an object here

so that's the reason you have to document.getElementById('sessionLineGutter').appendChild(line)

I hope you understand

I am calling the functions inside the object. Sorry, I thought I was clear enough, it is updated now. — Corentin Caer, Oct 19 '16 at 01:01
Of course you can call them using this inside other methods where `this` is the object? — Bergi, Oct 19 '16 at 01:07

Javascript Class Variable Scope Becomes Undefined

1 Answers1