‘This’ in JavaScript

https://www.youtube.com/watch?v=PSGEjv3Tqo0

I've also started to write my code mostly without `this`, `class` or `new`, not looking back.

Another related, highly recommend reading: https://medium.com/javascript-scene/the-two-pillars-of-javas...

I thoroughly understand `this` now after over a decade working in javascript, as well as thoroughly understanding `this` in Typescript which I use more now.

And I still make a mistake at least once a week. I know what I've done as soon as the code fails, but it's still so ridiculously easy to get into a context you didn't think you were.

Of all the mistakes made in javascript, `this` stands head and shoulders above everything else, with its arm round the prototypal class structure.

If you're doing a direct function call like myFunc() there is nothing "left" of the function call. But you might think of it as actually doing window.myFunc(), which again explains why this === window. In strict mode this behavior has been "fixed" so that this === undefined.

It's all about how a function is called.

  function Car() {
    var car = this;
  }

  var foo = {
    bar: 1,
    say: function say() {
      console.log(foo.bar); // foo instead of "this"
    }
  };

  const sayThis = _ => console.log(this)
  const boundFunc = sayThis.bind({hippy: 'hipster'})
  boundFunc()

There is surely a world of unexplained knowledge in that line for someone that doesn't know JS well

This removes the need for the `var self = this' hack and all the related weirdness.

An amusing consequence is that if you declare a simple closure as a method, its `this' pointer will be the stackframe of the lexical context where it is called.

    method test() { print(this.a); }
    var a = 5;
    test(); /* implicitly __stackframe__.test() */

The reason is straightforward: the `this' pointer is the object on whose lookup the closure was found...

    class Test {
        eval() {
            return eval('this');
        }

        aliasEval() {
            const e = eval;

            return e('this');
        }
    }

    const test = new Test();

    assert.equal(test.eval(), test);
    assert.equal(test.aliasEval(), global);

(I can't believe it was 6 years ago, time flies.)

This made me avoid JavaScript as much as possible. Fortunately, I finally dived in, building my first js heavy webapp -- without a single this in it.

I wish classes didn't make into ES6, object-oriented programming is a waste of time.

    this = "madness!";
    if (this === "madness!") {
        this = "SPARTA!!!";
    }

Best way I can think to describe `this`:

-----

1. Either you decide in advance exactly what you want `this` to be:

- Use `.bind()` on your function and fix the value of `this`

- Create an arrow function and get `this` from the lexical scope

- Alias `let self = this` in your desired scope, and only ever reference `self`

- Create a wrapper function which fixes the value of `this` (essentially, implement `.bind()`)

-----

2. Or `this` will be decided by your caller:

- Your caller will `.bind()` your function with an unknown value of `this`

- Your caller will call `.call()` or `.apply()` with an unknown value of `this`

- Your caller will attach your function to an unknown object, then call `unknownObject.yourFunction()`, setting `this` to `unknownObject`

- Your caller will call your function as a standalone function: `let newFunc = someObj.someFunc` - then call it, setting `this` to `global` or `window`

- Your caller will pass your function as a param to something like `setTimeout` and achieve the same effect, setting `this` to `global` or `window`

-----

Obviously, most of the time if you're going to use `this`, #1 is to be preferred, #2 is to be avoided, so it's imperative to decide in advance what you want `this` to be rather than allowing it to be decided by your caller.

(Unless that's absolutely what you want, and you have a good reason why -- like if you're writing a wrapper function which is agnostic to the value of `this` that's passed)