Daniel Daniel - 1 year ago 56
Javascript Question

Class Referencing in Functions Embedded in Class Methods

I have a class with multiple methods and properties. One of those methods has a setTimeout() function embedded in it as such:

function myClass() {
this.some_property = "test";
this.PrintOnTimeout = function() {
// I can do var.self = this;
// but I can't help but feel like that would be inefficient
setTimeout(function timeoutPrint() {
// I want to reference this.some_property here.
// Currently this.some_property returns an error as
// this refers to PrintOnTimeout() rather than myClass().

Apologies in advance if there's an answer up on StackOverflow. I've looked around but pretty much everything I find talks about extended classes and super(). Perhaps super() is the answer here and I'm not understanding it? I'd use global, but I'd prefer to treat each instance of this class as potentially unidentified. So if there's a this.GetMainParent or something... otherwise, I appreciate the uprgrade.

Answer Source

You can use an arrow function to bind this, use bind(this) or close over a local variable that stores the property.

Note that unless you bind this to every function involved, you need to make sure all related functions are always called in the correct context, otherwise you are binding the nested functions to the wrong this:

function a(){
  this.x = "hi";
  this.y = function() {
    setTimeout(() => { console.log(this.x); }, 100);

let obj = new a();
let outside = obj.y;
obj.y(); //y is being called with this === obj
outside(); //y is being called with this depending on strict mode, window or undefined.