Home/ Questions/Q 4324744
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T09:10:25+00:00

I just wrote this piece of code to represent this error that is killing

  • 0

I just wrote this piece of code to represent this error that is killing me (Grrr!)

I wonder why when I get error: method undefined I have checked in Safari and this variable inside parserDidStart() method is not of type EpisodeController it is of type EpisodeFeedParser why is this? 

<html>
<head>
<script type="text/javascript">
var EpisodeFeedParser = function(url){
    this.url = url;
    this.didStartCallback = null;
};
EpisodeFeedParser.prototype.parse = function(doc){
    this.didStartCallback(this);
};

var EpisodeController = function(){
    this.episodes = new Array();
    this.parser = null; //lazy
};
EpisodeController.prototype.parserDidStart = function(parser){
    console.log("here *this* is not of type EpisodeController but it is EpisodeFeedParser Why?");
    this.testEpi(); //**********ERROR HERE!***********
};
EpisodeController.prototype.fetchEpisodes = function(urlString){
    if(urlString !== undefined){
        if(parser === undefined){
            var parser = new EpisodeFeedParser(urlString);
            parser.didStartCallback = this.parserDidStart;
            this.parser = parser;
        }
        this.parser.parse();
    }
};
EpisodeController.prototype.testEpi = function(){
console.log("it worked!");
};

function testEpisode(){
    var controller = new EpisodeController();
    controller.fetchEpisodes("myurl");
}
</script>
</head>
<body>
<button type="button" onclick="testEpisode()">press me</button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this is a frequently misunderstood aspect of Javascript. (and by “this”, I mean this)

    You can think of this as another parameter that gets invisibly passed in to your functions. So when you write a function like,

    function add (a,b) {
   return a+b;
}

    you’re really writing 

    function add(this, a, b) {
    return a+b;
}

    That much is probably obvious, what isn’t obvious is exactly what gets passed in, and named as “this”. The rules for that are as follows. There are four ways to invoke a function, and they each bind a different thing to this.

    classic function call

    add(a,b);

    in the classic function call, this is bound to the global object. That rule is now universally seen as a mistake, and will probably be set to null in future versions.

    constructor invocation

    new add(a,b);

    in the constructor invocation, this is set to a fresh new object whose internal (and inaccessible) prototype pointer is set to add.prototype

    method invocation

    someobject.add(a,b);

    in the method invocation, this gets set to someobject. it doesn’t matter where you originally defined add, whether it was inside a constructor, part of a particular object’s prototype, or whatever. If you invoke a function in this way, this is set to whatever object you called it on. This is the rule you are running afoul of.

    call/apply invocation

     add.call(someobject,a,b);

    in the call/apply invocation, this is set to whatever you pass in to the now visible first parameter of the call method.

    what happens in your code is this:

     this.parser.didStartCallback = this.parserDidStart;

    while you wrote parserDidStart with the expectation that its this would be an EpisodeController when you method invoke it… what actually happens is you’re now changing its this from the EpisodeController to this.parser. That’s not happening in that particular line of code. The switch doesn’t physically happen until here:

    this.didStartCallback(this);

    where this in this instance is the EpisodeParser, and by the time this code is run, you’ve asigned parserDidStart to be named didStartCallback. When you call didStartCallback here, with this code, you’re essentially saying…

    didStartCallback.call(this,this);

    by saying this.didStartCallback() ,you’re setting its this to.. well.. the this when you call it.

    You should be aware of a function called bind, which is explained here:
    https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

    Bind creates a new function from an existing function, whose this is fixed (bound) to whatever object you explicitly pass in.

    • 0