'this' returns undefined in extended Classes in Javascript

Question

I am trying to run the code below, but it is not working. I think this is a scope problem, but I'm not sure how to fix this.

import CommonController from './CommonController';
import CategoryService from './category/Service.js';

class CategoryController extends CommonController {
  constructor() {
    super(CategoryService);
  }
}
export default new CategoryController();

// ===================CommonController==========================

export default class CommonController {
  constructor(service) {
    this.service = service;
  }

  async get () {
    console.log(this); // it returns undefined
  }
}

// ===================CategoryService==========================
import Category from './Category'
import dto from './dto'

class CategoryService extends CommonService {
  constructor() {
    super(Category, dto);
  }
}
export default new CategoryService();

// ===================CommonService==========================

export default class CommonService {
  constructor(model, dto) {
    this.model = model;
    this.dto = dto;
  }
 }

if a run:

import CategoryController from './CategoryController';

CategoryController.get()

the console.log in CommonController get function will print undefined

Am I doing something wrong?

Your `this` is in the context of `async get ()` which may be undefined. Have you checked the *babel* docs on how to inject `this`? — GetSet, Feb 10 '20 at 21:22
I cannot reproduce, in the call `categoryController.get()` the `this` keyword refers to the `categoryController`. — Bergi, Feb 10 '20 at 21:23
"*Am I doing something wrong?*" - don't [default-export `new` class instances](https://stackoverflow.com/a/38741262/1048572). Either export the whole class, or simply use an object literal (or even [use named exports](https://stackoverflow.com/a/29895235/1048572)) — Bergi, Feb 10 '20 at 21:26

score 2 · Answer 1 · answered Feb 10 '20 at 21:28

The issue is that you are calling get() on the class itself, instead of calling it on an instance of the class. Try creating an instance of CategoryController, like so:

cc = new CategoryController();

Then, you should be able to call:

cc.get();

Demo in the code below (same as yours, just slightly modified to reflect my point).

// ===================CommonController==========================

class CommonController {
  constructor(service) {
    this.service = service;
  }
  
  async get () {
    console.log(this); // it returns undefined
  }
}



// ===================CommonService==========================

class CommonService {
  constructor(model, dto) {
    this.model = model;
    this.dto = dto;
  }
 }

// ===================CategoryService==========================
class CategoryService extends CommonService {
  constructor() {
    super(Category, dto);
  }
}

class CategoryController extends CommonController {
  constructor() {
    super(CategoryService);
  }
}
 
 
 cs = new CategoryController();
 cs.get();

'this' returns undefined in extended Classes in Javascript

1 Answers1