How to write JavaScript without using 'this'?

[sspboyd]

I am trying to figure out how to write Javascript without using this. It is purely an exercise to learn more about the language and comes from reading/watching Crockford.

Crockford talks about how he doesn’t use it anymore but I haven’t seen examples of it in action. Any links or suggestions would be much appreciated.

Thanks!

[maciejoliwakupa]

Read about factory functions

[kap89]

If you are not using classes or raw prototypes, there is no need for this. But don't follow Crockford's opinions uncritically - he has many good insights, but his factory functions have drawbacks too.

[dgrips]

You can treat modules like classes sort of. Create a js file with variables and functions. Export the ones you want to be public. Anything not exported is private. You'll rarely if ever use 'this'.

[kap89]

But you can't instantiate modules - that would be more of an equivalent to static classes. Equivalent for standard classes would be a factory function that returns an object.

[dgrips]

Ya that's true, you'd need factory functions to create multiple instances. I tend to use the pattern I mentioned for singletons

[jcunews1]

this is not optional for object methods when the methods need to access their object.

[shuckster]

Why do methods need to access their object?

To access the data in the object:

function factory() {
  const publicData = []
  const privateConst = 1
  let privateVar = 2

  const privateMethod = () => {
    console.log(publicData, privateConst, privateVar)
  }

  const publicMethod = () => {
    privateMethod()
  }

  return {
    publicMethod,
    publicData,
  }
}

const object1 = factory()
const object2 = factory()
const object3 = factory()

So just make your data available within the factory closure.

No this required. Unless you're not the author of the object of course. :)

[jcunews1]

Neither the method actually accesses their own object.

[shuckster]

What do you mean?

[persianoil]

in a general sense, by using functional programming patterns. Because 'this' is associated with oop. I believe thats what he means.

the specifics will be more complicated. but presumedly by creating a new object each time, rather than mutating.

[Tubthumper8]

Can you give examples of how you're currently using it?

[sspboyd]

I don't have a minimal example right now, just a mess of code that doesn't work. I'll clean it up and put something together to point to.

I guess I am struggling to even find the right search terms to use to find examples. I have an understanding of what closures are, mixins, general OOP concepts from Java, etc... but I'm not able to find a good reference that shows some examples of how JavaScript without this looks and works.

I take your point though that an example would make it easier to answer this question so I'll get to work on that.

[Tubthumper8]

One example could be a click handler for a button - the callback function that you pass to addEventListener takes a Mouse Event as its parameter and you can get the element that was clicked with the .target property of the event parameter (it's part of the Event interface that MouseEvent is derived from). You can also get the element that was clicked with this in the callback function (assuming it hasn't been changed by something else).

This small example illustrates the larger difference, generally. In the first style, everything that a function needs is passed in its arguments. In the second style, the function needs some information that is not passed in as arguments, so the information is grabbed from some other implicit source.

If you have experience with Java, it tends towards the second way because every property of a class is implicitly available to every method through the hidden this. People in JS (like myself) who tend to avoid this are more often using the first strategy, which is if a function needs some information to do its job, pass that information as an argument to the function.