Javascript Fundamentals: ‘this’ keyword

https://blog.bloomca.me/2018/08/24/javascript-fundamentals-this.html

by bloomca • 8 years ago

73 53 8 years ago

blog.bloomca.me

The answer to every question in this article, and any 'quiz' on how to use the arbitrary and ridiculous 'this' in JS is simple: use TypeScript.

n_e• 8 years ago

« this » works exactly the same in TypeScript.

sonnyblarney6• 8 years ago

I realize, but it's more of a reaction to the inanity of JS, moreover, since I've started using JS, I've never once had any issue with 'this' - the way one constructs code often in TS is simply quite different i.e. it's really not just 'JS with typing' even if you want it to be just that, usually it's not.

digitaLandscape2• 8 years ago

This would have been a good post in 2014 but it shouldn't be relevant to any JavaScript developers in 2018.

Arrow functions don't have `this`, and `...` syntax is simpler and as efficient as using `apply`. You only still need to use `function(){}` for generators and custom constructors, which are rare.

sdegutis7• 8 years ago

Very relevant in 2018. React uses ES6 classes (inherit from React.Component) so you're very often using `this` in React. In fact it's still a major source of confusion still for many devs like me, especially when you create and pass callback functions. I've been meaning to write a blog post on this so maybe this is the motivation I needed.

digitaLandscape2• 8 years ago

Just use arrow functions for your callbacks!

This is trivial. Don't create a problem that doesn't exist.

ggregoire2• 8 years ago

What do you find confusing about callback functions? Maybe I can help.

Here is a simple example:

  class Foo extends Component {
    state = { foo: 1 }

    updateState = foo => this.setState({ foo })

    render() { return <FooChild foo={this.state.foo} updateState={this.updateState} /> }
  }

Foo and FooChild will render again only if 'foo' is updated.

aphextron3• 8 years ago

Every time you call this within an arrow function, the transpiler is still just doing a “this = that” in your code for you.

swaggyBoatswain• 8 years ago

honestly "this" is such a stupid construct in javascript, there's way too many obscure and unuseful edge cases to memorize.

expertentipp2• 8 years ago

Not knowing this 8 years ago in interviews was the same disqualifying as not knowing nowadays what is the latest Angular version and why is it incompatible with the previous version. The difference is that "this" is still relevant - just hit F12, enter "this", and hit <ENTER>.

anonytrary5• 8 years ago

If you're getting asked about Angular in your interviews, its probably because you applied to a front-end job where they explicitly told you that you will be using Angular 8 hours a day.

expertentipp2• 8 years ago

Front-end is not synonymous with Angular at all.

131hn• 8 years ago

« this » is « the thing on the left side of the dot ».

(that’s not always true, nor a complete definition - but it helps me a lot in understanding the whole thing)

stupidcar• 8 years ago

I think the main reason "this" is considered confusing is that many programmers learning JS have already spent years coding in Java or C#. They expect it to work the same, then get frustrated when it doesn't. But the reason it doesn't is due to the fact that functions in JS are first-class, and don't intrinsically belong to a particular class and object instance they way they do in those languages. As such, the context represented by "this" has to be more fluid in JS.

That's not to say that the design of "this" is perfect. And it doesn't help that JS' syntax was designed to resemble C-family languages that it differs from significantly. But nor it is some entirely arbitrary and illogical flaw. If you take the time, it's possible to gain an intuitive grasp of how functions and "this" work in JS. But instead, learners are too often told that "JS is quirky" by others who also have come to it from Java / C#, and never move past memorizing to a list of these "quirks" to genuine proficiency. They then grumble whenever they need to work on a JS codebase, because their incomplete understanding makes it feel like they're standing on quicksand.

Soon such devs fall into a circular trap: They don't like coding in JS because it feels weird and unintuitive. And they don't take the time to learn about it more deeply because they don't like coding with it, and don't want to waste time learning about something they dislike. But since they have to code with it, because it's part of their job, they just stumble along, hacking away and getting frustrated when things don't work, then come onto Hacker News and blow off steam about what a garbage language JS is.

aphextron3• 8 years ago

I think the main reason "this" is considered confusing is that many programmers learning JS have already spent years coding in Java or C#. They expect it to work the same, then get frustrated when it doesn't. But the reason it doesn't is due to the fact that functions in JS are first-class, and don't intrinsically belong to a particular class and object instance they way they do in those languages. As such, the context represented by "this" has to be more fluid in JS.

As someone who’s “native” language is JS, I think that’s spot on. I never had the baggage of thinking in terms of Java or C++, and so I couldn’t understand why people would get confused over “this” because it was fundamental to learning the language and thus to my mental model of programming in general.

wruza4• 8 years ago

I believe that’s because you ask ‘what this really is’ and get another ton of bullshit articles that never do a strict definition of the mechanism, instead resorting to vague examples with bad names. MDN included.

paol2• 8 years ago

Having very different semantics hiding under identical syntax is still a design fault with the language though, especially considering that Javascript's adherence to Java syntax is deliberate not accidental.

I really don't blame programmers for getting confused by this.

curun1r• 8 years ago

due to the fact that functions in JS are first-class

I don't agree with that. There are plenty of languages with first-class functions that don't have this kind of confusion. There's nothing about a function being a value and being able to pass functions around that necessitates the awkwardness of JavaScript's 'this'.

What does necessitate it is the lack of separation between functions and objects. The fact that a function can also have its own properties is, to my mind, a mistake in the design of the language. And it's a decision that those other languages with first-class functions and no 'this' problem didn't make. If objects and functions are distinct concepts in the language, it's trivial to make 'this' be dead simple and allow programmers to have a simpler mental model.

wruza4• 8 years ago

What model, exactly?

In perl/c[++]/#/java, you have to carry object around with a method (or use functors), otherwise you’ll call it with wrong arguments. In python methods are bound implicitly in a class, but explicitly in assignment (iirc). In Lua you’re explicit with obj:mtd() instead of obj.fun(). In js, obj.mtd() is eqv. to obj:mtd() in that sense, but you can bind() to anything.

Which model is preferable? ‘this’ is natural complexity, and under ‘use strict’ it behaves just okay. It is programmers who don’t care to grasp it.

Saying that as a natural js hater.

pitaj2• 8 years ago

You're correct that other languages have first-class functions which are capable of handling context without the implicit-this style like JS. Rust, for instance, uses `self`-as-first-parameter style.

However, `this` has nothing to do with functions being objects, besides the fact that the prototype object is a member to the constructor function.

ashleyn• 8 years ago

Java ushered in with it, a sort of tunnel vision that class-based inheritance was _the_ fundamental theorem of business programming. When people see prototypal inheritance like in JS, they call it "quirky" or "poorly designed", as if it were haphazardly evolved as opposed to deliberately designed. When languages like Go or Rust came out, it was shocking how many times I saw "where's classes?" come up on the mailing list.

platz• 8 years ago

No.

'this' is confusing because it is a novel abstraction that has no analog/referent to anything familiar, even if JavaScript is your first language. It is completely unintuitive and simply must be internalized with time

Effectively, 'this' forces you to understand the majority of the prototypal nature of JavaScript just to simply call some functions.

Alternatively, don't use this at all, ever. You can pass explicit arguments for anything you need.

holmberd• 8 years ago

Sums it up pretty good. 'this' was a minor problem when promises came out and bind got sort of sprinkled everywhere. Arrow notations can now take care of that by making it less verbose by binding 'this' behind the scenes.

lucisferre• 8 years ago

I could summarize the `this` keyword in one sentence: Avoid it.

paol2• 8 years ago

It's really frustrating that the ECMA people didn't define class methods to always be bound just like arrow functions. Like arrow functions, classes are a new syntax so there are no backward compatibility concerns.

That said, having two different semantics based on which syntax you happened to use to define a function is almost as big a programmer trap as the original problem. It just goes to show there are no good solutions to fundamental language design errors.

aphextron3• 8 years ago

It's really frustrating that the ECMA people didn't define class methods to always be bound just like arrow functions.

This is a huge annoyance because I never really know where to bind my events. It always ends up just being an awkwardly placed "bindEvents" call somewhere in the init function.

jaunkst• 8 years ago

This is fine. It's not confusing. Don't expect JavaScript to be Java.

anonytrary5• 8 years ago

This example is needlessly confusing:

  const a = {
    b: 42,
    c: function() {
      return this.b;
    }
  };

  (a.c || [])(); // 1
  (a.c)(); // 2
  (1, a.c)(); // 3

He's trying to illustrate that an expression returns a reference to the (unbound) function. This line "(a.c || [])()" is bothering me -- why on earth would this line exist in any program? Are we trying to throw a type error on purpose? Maybe "(a.c || (()=>{}))()" would have been more appropriate.

I spent about 5 minutes wondering why each line returned 1, 2 and 3 respectively, when they should be returning the global value of b. If you are going to be showing obscure, tricky examples of Javascript, the last thing you want to do is have superfluous comments in your code. Follow comment conventions for the sake of your readers' sanity. This would have been much less confusing:

  const a = {
    b: 42,
    c: function() {
      return this.b;
    }
  };

  (a.c || (() => {}))(); // undefined
  (a.c)(); // undefined
  (1, a.c)(); // undefined

pitaj2• 8 years ago

`(a.c)()` is not undefined, it's 42

anonytrary5• 8 years ago

Nice catch, I should edit that but it's too late. I think my point still stands, however...

wruza4• 8 years ago

This line "(a.c || [])()" is bothering me -- why on earth would this line exist in any program?

A variation of it is valid for method selection, such as:

  (cond ? a.foo : b.bar)();

or, for method fallback:

  (a.foo || a.fooDefault)();

Neither does work in js, though.

anonytrary5• 8 years ago

This is useful and works with functions that don't use `this` (like arrow functions).

werkjohann• 8 years ago

JavaScript Fundamentals: it’s “JavaScript”, not “Javascript” :P

Javascript Fundamentals: ‘this’ keyword

Related Stories