Theo's Typesafe Cult•3y ago

JS Classes and This

I'm curious if there is a way to avoid using arrow functions for methods you want to keep bound to the instance. For example,

class Pog{

  works = () => console.log(this)

  notworks(){
    console.log(this)
  }
}

const pog = new Pog()
const works = pog.works
const notworks = pog.notworks

works() // Pog {...
notworks() // undefined

class Pog{

  works = () => console.log(this)

  notworks(){
    console.log(this)
  }
}

const pog = new Pog()
const works = pog.works
const notworks = pog.notworks

works() // Pog {...
notworks() // undefined

63 Replies

Samathingamajig•3y ago

the annoying way is

class Pog{
  constructor() {
    this.works2 = this.works2.bind(this);
  }

  works = () => console.log(this)

  notworks(){
    console.log(this)
  }

  works2() {
    console.log(this);
  }
}

class Pog{
  constructor() {
    this.works2 = this.works2.bind(this);
  }

  works = () => console.log(this)

  notworks(){
    console.log(this)
  }

  works2() {
    console.log(this);
  }
}

bentenOP•3y ago

I know I can do const notworks = pog.notworks.bind(pog) but thats way worse than an arrow fn

Samathingamajig•3y ago

what do you have against using arrow functions?

bentenOP•3y ago

I think they're less readable But thanks, works2 is what I was looking for i guess

Jon Higger (He / Him)•3y ago

I don't think many people would agree with that sentiment if the alternative to arrow functions is manually binding the this keyword IMO

bentenOP•3y ago

Yeah it feels icky

Jon Higger (He / Him)•3y ago

I mean it's probably good to learn some of the outdated JS stuff so that way you get to know the gotchas in case you're in a codebase with it.

bentenOP•3y ago

do people just...always use arrow functions in classes then?

Jon Higger (He / Him)•3y ago

pretty much I think

bentenOP•3y ago

fair enough

Jon Higger (He / Him)•3y ago

I also think (I could be wrong), in typescript it does that for you So I'll see the ES5 syntax in typescript more often

bentenOP•3y ago

no i was running into an issue with this in ts

Jon Higger (He / Him)•3y ago

https://www.typescriptlang.org/play?#code/MYGwhgzhAEAKD2BzA3gKFdaB3eAnA1jALzQAUAlNEQHzTDwB2E8IApgHQhKkAuAFgEsI5dJgbweOAhAppMmekxYcuiXoOEZoAX1S7UiiD2hgq0BqyxxuI1GHbjJeQhSA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Jon Higger (He / Him)•3y ago

interesting I know notworks works in that example, maybe it's a version thing?

bentenOP•3y ago

Well, that works but the example would actually be calling

 const foo = a.notworks
foo() // undefined

 const foo = a.notworks
foo() // undefined

Not sure if it's a TS thing tho, the difference is that notworks() assigns the method to the prototype and works = () => assigns the method to the instance I've literally gone years without knowing how this works in js lol

Jon Higger (He / Him)•3y ago

Yeah I think I was straight wrong about the TS thing my bad

bentenOP•3y ago

all good its fucking confusing it's stuff like this that really highlights how shit JS really is and the monumental job ES6 did to make it decent for most cases

Jon Higger (He / Him)•3y ago

Sometimes I don't think I give enough credit to JS haters. In hindsight it feels like there's a bunch of pitfalls that's just like "Oh that whole thing I just never do and I'm fine, I don't see why everybody hates JS so much"

bentenOP•3y ago

Yeah until you do and then you realise they might have been more right than you thought

Jon Higger (He / Him)•3y ago

I will say I think in TS, if you opt in to functional programming, it can be an extremely nice langauge, and alot of the footguns are extremely avoidable.

Unknown User•3y ago

Message Not Public

Samathingamajig•3y ago

the

class Pog{
 a() {
    console.log(this);
  }
}

const p = new Pog();
p.a(); // works
const aa = p.a;
a(); // doesn't work

class Pog{
 a() {
    console.log(this);
  }
}

const p = new Pog();
p.a(); // works
const aa = p.a;
a(); // doesn't work

model is like

function Pog {};

Pog.prototype.a = function a() {
  console.log(this);
};

const p = new Pog();
p.a(); // works
const aa = p.a;
aa(); // doesn't work

function Pog {};

Pog.prototype.a = function a() {
  console.log(this);
};

const p = new Pog();
p.a(); // works
const aa = p.a;
aa(); // doesn't work

(the method belongs to the class, not the instance) the

class Pog{
 b = () => {
    console.log(this);
  }
}

const p = new Pog();
p.b(); // works
const bb = p.b;
bb(); // works

class Pog{
 b = () => {
    console.log(this);
  }
}

const p = new Pog();
p.b(); // works
const bb = p.b;
bb(); // works

model is like

function Pog() {};
const p = new Pog();
p.b = function b() { console.log(this); };

p.b(); // works
const bb = p.b;
bb(); // works

function Pog() {};
const p = new Pog();
p.b = function b() { console.log(this); };

p.b(); // works
const bb = p.b;
bb(); // works

function Pog() {
  this.b = function b() { console.log(this); }
};

const p = new Pog();
p.b(); // works
const bb = p.b;
bb(); // works

function Pog() {
  this.b = function b() { console.log(this); }
};

const p = new Pog();
p.b(); // works
const bb = p.b;
bb(); // works

(the method belongs to the instance) i think

Gaming

Programming

JS Classes and This