Javascript class inheritance weird behavior

Question

I have a class Question and its sub class

    var Question = function(id, text){
        this.id = id;
        this.text = text;
}

Question.prototype.Display = function(){
    console.log("Entering Display");
}
var QType1 = function(question_obj){
    //this is true or false
    Question.call(this, question_obj.id, question_obj.settings.text) ;
    this.choices = question_obj.settings.choices;
    this.answers = question_obj.settings.answers;
}

//inherit Question
QType1.prototype = new Question();

When I change it to the below code, it doesnt work. Can anyone explain me why this is happening?

var Question = function(question_obj){
        this.id = question_obj.id;
        this.text = question_obj.setting.text;
}

Question.prototype.Display = function(){
    console.log("Entering Display");
}
var QType1 = function(question_obj){
    //this is true or false
    Question.call(this, question_obj) ;
    this.choices = question_obj.settings.choices;
    this.answers = question_obj.settings.answers;
}

//inherit Question
QType1.prototype = new Question();

You're calling the constructor with no parameters. What do you expect that to do? — SLaks
– SLaks, Commented Nov 3, 2013 at 22:28
blog.slaks.net/2013-09-03/traditional-inheritance-in-javascript — SLaks
– SLaks, Commented Nov 3, 2013 at 22:29
in the first set of lines, I am doing the same thing and javascript accepts that. Instead of the id,text , I am replacing it with the whole question_obj. why does this change makes it to fail? — surya
– surya, Commented Nov 3, 2013 at 22:29
Define "doesn't work". How do you call the constructor, what do you expect, what do you get. — RobG
– RobG, Commented Nov 3, 2013 at 22:31
THe first set of lines passes without any errors. In the changed code, I get question_obj as undefined. — surya
– surya, Commented Nov 3, 2013 at 22:33

Mike Edwards · Accepted Answer · 2013-11-03 22:45:27Z

Because in the first version you are accessing function arguments that weren't passed, so their values are undefined. This does not generate an error.

In the second example you are dereferencing into an undefined object. If you have an undefined value and try to access a property on it, you'll always generate an error.

foo(); // no arguments

function foo(a,b) {
    // 'a' is undefined, so is 'b'
    console.log(a);             // this is fine, you just get undefined
    console.log(b.doesntExist); // this will throw the error you are seeing
}

You may want to reconsider how you are using it, but the "quick fix" would be to change your constructor in the second case to this:

var Question = function(question_obj){
    if(question_obj !== undefined) { // now you know it's safe to dereference
        this.id = question_obj.id;
        this.text = question_obj.setting.text;
    }
}

Collectives™ on Stack Overflow

Javascript class inheritance weird behavior

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related