this is undefined in JavaScript class methods

Question

I m new to JavaScript  New as far as all I ve really done with it is tweaked existing code and wrote small bits of jQuery   Now I m attempting to write a  class  with attributes and methods  but I m having trouble with the methods  My code    function Request destination  stay open        this state    ready       this xhr   null      this destination   destination      this stay open   stay open       this open   function data            this xhr     ajax               url  destination              success  this handle response              error  this handle failure              timeout  100000000              data  data              dataType   json                              snip           Request prototype start   function         if  this stay open    true             this open  msg   listen           else               all console log s omitted   The problem is  in Request prototype start  this is undefined and thus the if statement evaluates to false  What am I doing wrong here

User · Answer

JavaScript s OOP is a little funky  or a lot  and it takes some getting used to  This first thing you need to keep in mind is that there are no Classes and thinking in terms of classes can trip you up  And in order to use a method attached to a Constructor  the JavaScript equivalent of a Class definition  you need to instantiate your object  For example   Ninja   function  name        this name   name     aNinja   new Ninja  foxy    aNinja name    - gt   foxy   enemyNinja   new Ninja  boggis    enemyNinja name      gt   boggis    Note that Ninja instances have the same properties but aNinja cannot access the properties of enemyNinja   This part should be really easy straightforward  Things get a bit different when you start adding stuff to the prototype   Ninja prototype jump   function         return this name     jumped       Ninja prototype jump      - gt  Error  aNinja jump      - gt   foxy jumped   enemyNinja jump      - gt   boggis jumped     Calling this directly will throw an error because this only points to the correct object  your  Class   when the Constructor is instantiated  otherwise it points to the global object  window in a browser

User · Answer

In ES2015 a k a ES6  class is a syntactic sugar for functions   If you want to force to set a context for this you can use bind   method  As  chetan pointed  on invocation you can set the context as well  Check the example below   class Form extends React Component   constructor         super          handleChange e        switch  e target id          case  owner           this setState  owner  e target value            break        default              render         return          lt form onSubmit  this handleNewCodeBlock  gt           lt p gt Owner  lt  p gt   lt input onChange  this handleChange bind this     gt         lt  form gt                 Here we forced the context inside handleChange   to Form

User · Answer

I just wanted to point out that sometimes this error happens because a function has been used as a high order function  passed as an argument  and then the scope of this got lost  In such cases  I would recommend passing such function bound to this  E g   this myFunction bind this

User · Answer

This question has been answered  but maybe this might someone else coming here  I also had an issue where this is undefined  when I was foolishly trying to destructure the methods of a class when initialising it  import MyClass from  quot   myClass quot       this  is not defined here  const   aMethod     new MyClass   aMethod      error   this  is not defined     So instead  init as you would normally  const myClass   new MyClass   myClass aMethod      OK

User · Answer

How are you calling the start function   This should work  new is the key   var o   new Request destination  stay open   o start      If you directly call it like Request prototype start    this will refer to the global context  window in browsers    Also  if this is undefined  it results in an error  The if expression does not evaluate to false   Update  this object is not set based on declaration  but by invocation  What it means is that if you assign the function property to a variable like x   o start and call x    this inside start no longer refers to o  This is what happens when you do setTimeout  To make it work  do this instead    var o   new Request        setTimeout function     o start       1000

User · Answer

Use arrow function  Request prototype start        gt        if  this stay open    true             this open  msg   listen           else

[javascript] 'this' is undefined in JavaScript class methods

Examples related to javascript

Examples related to class

Examples related to prototype