JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript’s `this` keyword is a source of confusion for new and experienced developers alike. It can be frustrating if, for some reason, `this` doesn’t point to the context that was intended. 

This course will help you understand JavaScript’s `this` mechanism in-depth. Marius will take us through all of the ways `this` will change its values, from why many libraries use "use strict" to how arrow functions take its outer execution context’s `this`. 

Over 8 lessons, you’ll learn:

- how JavaScript implicitly sets the `this` context, and how we can set it ourselves
- that the call-site of a function determines the `this` value of that function invocation 
- how to call a function with a specific `this` value
- how to create functions that always remain tied to a specific this context
- how `this` is treated within arrow functions and classes

Following the course, `this` will feel less frustrating, more intuitive, and far more useful in your day-to-day. 

JavaScript's `this` mechanism behaves a little differently compared to other languages. When used in the global context (outside of any function), `this` refers to the **global object**. This lesson highlights the different behavior between Node and the browser.

this in the Global Context

In most cases, the value of a function's `this` argument is determined by how the function is called. This lesson explains what `this` refers to when we call plain function. Marius points out how functions behave differently in strict and non-strict mode. `"use strict"` mode defaults `this` to undefined and prevents us from assigning values to undefined. We must call functions as a constructor to assign their `this` value correctly.



this in Function Calls

In JavaScript, there are no special constructor functions. Instead, a function call can turn into a **constructor call** when that function is called with the `new` operator in front of it.

When a function is called as a constructor, a new object is created and set as the function's `this` argument. This object is then returned implicitly from the function if no other object is returned explicitly.

In this lesson, we'll play around with constructor calls and see why it might make sense to return a different object from the function.

this in Constructor Calls

When a function is called as a method of an object, that function's `this` argument is set to the object the method is called on. That object is called the **receiver** of the function call.

Oftentimes, the receiver gets lost when we invoke a method as a function. This happens particularly often when passing a method as a callback to another function.

In this lesson we'll see how the receiver mechanism works, what problems it creates, and how to work around these problems using wrapper functions or the `bind` method.

this in Method Calls

A function's `this` argument is usually set implicitly, depending on how the function is called. Ordinary function calls, method calls, and constructor calls all lead to a different `this` value.

We can also call a function with an **explicit** `this` argument using `Function.prototype.call()` or `Function.prototype.apply()`. Both methods accept a `thisArg` as their first parameter and a variable number of additional arguments.

This lesson shows how to use `call()` and `apply()` and explains how they differ.

Specify this using .call() or .apply()

The `Function.prototype.bind()` method lets us permanently tie a function's `this` argument to a specific value. It creates a new **bound function** that calls the original function with the provided `this` argument, no matter how that bound function is called.

In this lesson we'll see how to use the `bind()` method. To better understand how it works, we'll implement a naive version of `bind()` ourselves.

Hard-Bind a Function's this Value with the .bind() Method

Arrow functions are not only syntactically different from other JavaScript functions, but they also have special `this` behavior. An arrow function doesn't have its own `this`. Instead, it uses the `this` value from its enclosing execution context.

When an arrow function is created, it permanently captures the surrounding `this` value. Neither `call()` nor `apply()` can change the `this` value later. Additionally, arrow functions cannot be used as constructors.

This lesson demonstrates that arrow functions are `this`-transparent and illustrates how they can solve the problem of incorrect `this` values within callback functions.

Capture this with an Arrow Function

Within the constructor of a class, `this` refers to the newly created object. Within a method, however, `this` might refer to another value if the method is called as an ordinary function. Just like any other object method, class methods can lose their intended receiver this way.

This lesson shows different approaches to solving this problem either by binding class methods or by using class fields with arrow functions instead.

this in Class Bodies

Understand JavaScript's this Keyword in Depth

https://app.egghead.io/api/v1/lessons/javascript-this-in-the-global-context/subtitles

Instructor: [00:01] JavaScript's this mechanism behaves a little differently compared to other languages. It might not always be intuitive. Let's start off by looking at how this works in the global execution context. When used outside of any function, this refers to the global object.

[00:18] In the browser, that would be window. It doesn't matter whether or not we are in strict mode. A top-level this always refers to the global object. Now let's switch over to node. At the top level, this is equivalent to the global object as well, which is called global.

[00:42] However, that is only true within the node REPL. Let's execute the same line of code within a node module. Suddenly, we get false. This is because, in the top-level code of a node module, this is equivalent to module.exports.

[01:09] If we now run the program again, we get true. The node engine runs each module code inside of a REPL function. That REPL function is invoked with a this value set to module.exports. In a future lesson, we are going to discuss how to invoke a function with a specific this value using either call, apply, or bind.

https://app.egghead.io/api/v1/lessons/javascript-this-in-the-global-context/transcript

https://app.egghead.io/api/v1/lessons/javascript-this-in-function-calls/subtitles

Instructor: [00:00] In most cases, the value of a function's this argument is determined by all the function is called. That means, the this value may be different each time the function is executed. Let's look at a plain and decorated function call.

[00:15] If we're not in strict mode, a plain function call sets the function's this value to the global object. If we're in strict mode, a plain function call sets the function's this value to undefined. It doesn't matter whether are not the cause side is in strict mode. It all depends and whether or not the function is in strict mode.

[00:42] The distinction will become relevant for you, if for example, your code is written in strict mode, but some third party library that you're using is not. Let's now see, why it makes sense for the this value to be undefined in strict mode.

[01:01] Here is a simple person function that accepts two parameters and initializes two properties. Note that this piece of code is not in strict mode. If we invoke the person function using a plain function call, the result probably isn't what we intended. The person variable holds the value undefined.

[01:25] Since we're not in strict mode, this within the function refers to the global object. Therefore, we assigned first name and last name to global. This is unfortunate, because it's almost never the desired behavior. Let's contrast this with strict mode where the this value within the function is set to undefined.

[01:48] Now, we get an error when invoking the person function using a plain function call, because we cannot assign properties to undefined. That prevents us from accidentally creating global variables, which is a good thing. The uppercase function name is a hint to us. That was supposed to call it as a constructor. We do that using the new operator.

[02:10] Now, we correctly construct a new person, and we also no longer pollute the global object with the first name and last name properties.

https://app.egghead.io/api/v1/lessons/javascript-this-in-function-calls/transcript

https://app.egghead.io/api/v1/lessons/javascript-this-in-constructor-calls/subtitles

Instructor: [00:00] In JavaScript, a function call with a new operator in front of it turns into a constructor call. When a function is invoked as a constructor, a brand-new object is created for us automatically, and that new object is then used as the this binding for the function call.

[00:17] In our example, we are initializing the new object by setting the two properties first name and last name. If I put in a couple of log statements, we can trace how the person object is put together step by step. We also see the name of the constructor function in notes console output.

[00:39] This shows us that our new object has been linked to the person function's prototype. Notice that our person function doesn't contain a return statement. In that case, the brand-new object that was constructed for us is returned automatically.

[01:02] You can imagine an invisible return this statement at the end of the function. We can also return an entirely different object from the constructor function. After we return from the function, the newly-created object that we previously initialized is lost because it's out of scope and nobody has a reference to it anymore.

[01:33] It's not a very common use case to return a different object from its constructor function, but it might make sense in certain scenarios. For example, in a development environment, we could wrap the returned object in a proxy and alert developers whenever they use that object incorrectly.

[01:48] Note that if we try to return anything else than an object, the JavaScript engine will simply ignore the value we provided and return the newly-created object instead. This is why we see Jane Doe printed to the console, although we tried to return null.

https://app.egghead.io/api/v1/lessons/javascript-this-in-constructor-calls/transcript

https://app.egghead.io/api/v1/lessons/javascript-this-in-method-calls/subtitles

Instructor: [00:00] When a function is called as a method of an object, that function's this argument is set to the object the method is called on. Here, we're calling person.sayHi, and therefore the this value within the sayHi method refers to person.

[00:20] We say that person is the receiver of the method call. This receiver mechanism is not affected by where the function was defined. For example, we could have defined the function separately, and could have later attached it to person. We're still writing person.sayHi, and therefore person will still be the receiver of the method call.

[00:48] Sometimes, the call site is a property chain which looks like this. In that case, the receiver is the most immediate property before the method, which is person in this example. The foo.bar prefix in the beginning doesn't influence our this binding.

[01:09] One of the most common frustrations that developers have with this is when a method loses its receiver. Consider our initial example again. If we store a reference to the sayHi method in a variable, and later call that variable as a function, our intended receiver is lost. Within the sayHi function, this will refer to the global object, and not to person.

[01:37] This is because we now have a plain function call, and we're not in strict mode. Losing a receiver this way usually happens when we pass a method as a callback to another function. For example, setTimeout.

[01:50] setTimeout will call our function with this set to the global object, which is probably not what we intended here. One solution to this problem is to add a wrapper function. That way, person.sayHi is still invoked as a method, and doesn't lose its intended receiver.

[02:16] Another solution that I want to mention here for the sake of completeness is the bind method, which allows us to tie our this to a specific object. We're going to talk about the bind method in detail in a future lesson.

https://app.egghead.io/api/v1/lessons/javascript-this-in-method-calls/transcript

https://app.egghead.io/api/v1/lessons/javascript-specify-this-using-call-or-apply/subtitles

Instructor: [00:00] Here is our sayHi function from the previous lesson again. How would we call sayHi with person as a receiver without a touching sayHi to person first? We can do this using the call method. Call is defined on the function prototype, and therefore available on every function.

[00:23] As we can see this within this sayHi method, refers to the value we provide it explicitly we have the first argument. This argument is often called this arg. Alternatively, we can use the apply method which is also defined on the function prototype.

[00:46] What's the difference between call and apply? In addition to the this arg, we can also specify arguments that we want to pass to the function. Call and apply accept this arguments in a slightly different way. Usually, when we invoke a method, we say object.methodname followed by the arguments in parentheses, where however is only syntactic sugar for the following call.

[01:16] The first argument is the this arg and all arguments after that are the arguments that we want to pass to the function. We simply list them separated by comma. Instead of using call, we could've also use apply.

[01:34] Again, the first argument is the this arg. Now, the second argument is an array like object that contains all the arguments that we want to pass to the function. In the end, all of the above select the same slice from the array.

[01:56] Here is a simple pneumonic that helps me remember how call and apply expect their arguments. Call starts with the C, and therefore once a comma separated list. Apply starts with an A, and therefore once in array. It's a little cringe worthy, I know, but it sticks.

[02:17] Unfortunately, there is a gotcha, if you are using call or apply outside of strict mode. If you set the this arg to null or undefined, the JavaScript engine will ignore that value and use the global object instead.

[02:38] In strict mode, that doesn't happen. I recommend you write all of your code in strict mode, so your void surprises like these.

https://app.egghead.io/api/v1/lessons/javascript-specify-this-using-call-or-apply/transcript

https://app.egghead.io/api/v1/lessons/javascript-hard-bind-a-function-s-this-value-with-the-bind-method/subtitles

Instructor: [00:00] When we try to pass a method as a call back to another function, we often times lose the intended receiver of the method. The time out cause the call back with the this argument set to the global object, which is not what we intended.

[00:14] We can solve this problem by using the bind method. Bind will create a new sayHi function and permanently set as this value to person. This mechanism is sometimes referred to as hard binding. We can then pass the hard bound function to set time out.

[00:36] Now, sayHi is called with the correct this argument. Even if we extract our bound function into a variable, and invoke that variable as a function, the this argument is still tied to person. Once the function is bound, it's this argument can no longer be changed, not even by call or apply.

[01:09] We still see John's name in the output, not James, because the greet function is bound to person. Let's go ahead and build our own version of the bind method to better understand how it works. Bind is defined on the function prototype and it accepts a this arg that we want to bind to.

[01:32] What does bind return? Well, it returns another function. We will store a reference to the original function in the func variable, and later use apply to invoke it within our inner function. We also need to take care of any arguments that the caller of our inner function might provide. We'll just pass them along to our original function.

[01:59] Finally, bind allows us to fix a number of arguments ahead of time when we bind the original function. When our new function is invoked, the two argument lists are combined. We are effectively doing partial application here.

[02:14] First, we provide all fixed arguments and we can catenate all dynamic ones. This is still not a spec complaint implementation, so please don't use it anywhere. The native bind method is available in pretty much every browser, since IE9, so you might not even need a polifo.

https://app.egghead.io/api/v1/lessons/javascript-hard-bind-a-function-s-this-value-with-the-bind-method/transcript

By default, JavaScript allows you to mutate global objects. We've seen how when you call `lockdown()` from the ses library that it makes all of JavaScript's shared global objects immutable. 

This is great, but the rest of our JavaScript code that we write can still be tampered with.

Say we have this counter object that holds some state and has methods for incrementing and decrementing that state. 

```js
const makeCounter = () => {
  let count = 0;
  return {
    count,
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  };
};

const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.decr();
console.log(myCounter); // { count: 2, incr: {}, decr: {} }

```

Someone can come in and mutate our object. 
  
```js
const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.count = 'hehehehe';
myCounter.incr();
myCounter.decr();
console.log(myCounter); // { count: NaN, incr: {}, decr: {} }
```

This completely breaks our program. The first thing we can do to prevent this type of tampering is to make `count private`.

```js
const makeCounter = () => {
  let count = 0;
  return {
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  };
};

const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.count = 'hehehehe';
myCounter.decr();
const lastValue = myCounter.incr();
console.log({lastValue}); // { lasValue: 3 }
```

This prevents us from directly accessing `count` and mutating it but we can still mutate our methods.

```js
const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.incr = () => {
  console.log('I have hijacked your increment. There is nothing you can do.');
};
myCounter.decr();
const lastValue = myCounter.incr();
console.log({lastValue}); // { lasValue: undefined }
```

These methods need to be accessible to people because that's the API we want to expose so we can't just make them private.

We can use the `harden` function from the ses library to make our methods tamper-proof.

```js
const makeCounter = () => {
  let count = 0;
  return harden({
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  });
};
```

This locks down the object and prevents anyone from mutating it. Now if you try to reassign `incr` you'll get an error telling you `TypeError: Cannot assign to read only property 'incr' of object '[object Object]'`.

https://app.egghead.io/api/v1/lessons/javascript-capture-this-with-an-arrow-function/subtitles

Prevent JavaScript Object Tampering with the SES Library harden Function

[00:00] In this file we have the sess library being imported and What we're going to do here is just invoke the lockdown Function it gives us access to now by calling lockdown We are introducing a few different changes to our program

[00:18] One of those is that we are making all of JavaScript's shared global objects Immutable so as a result these is frozen checks are going to return true for us And if we remove them, we'll see that they quickly revert back to being false

[00:37] This is great as we've made our global objects immutable But let's see how we can continue and make the rest of our JavaScript code tamper-proof So here, I'm just creating a make counter function and then inside here I'll initialize a count variable to be zero

[01:01] And then we're just going to return this Alongside methods for incrementing and decrementing And so our increment method is Is going to shockingly Increase the count by one each time. It's called while decrement is going to take one away from work

[01:28] Now that we have that wired up. It's going to create this my counter variable using our make counter function and Then I'm going to Invoke the increment and decrement methods a few times and Lastly, we'll just log out my counter to see what we're working with

[01:53] If we take a look in the console we see that count is two and Three minus one equals two so our math checks out there Everything is Going smoothly, but oh no Somewhere along in our program My counter was mutated

[02:15] The count property is now this string of he he's and So this is less than ideal as we'll find our count variable is now Showing us not a number So what changes can we make to prevent this? so for one let's

[02:35] Stop returning this count property altogether Let's make it private to our function Now instead of using the this keyword we can just operate directly on this count all right, so now I'm just going to create a last value variable and set it equal to

[02:59] the result of my counter dot increment and now if we look in the console we see that we've successfully prevented our program From running into such issues as Last value is printing the correct value So we're moving in the right direction but let's see what happens if we

[03:23] Try to actually mutate one of our methods and here. I'm just going to change our increment and For right now, we're just going to have it log out the statement I

[03:39] Have hijacked your increment it. There's nothing you can do and I'm just going to place this above any other Increment thins to really screw things up here and if we look oh, I need to correctly mutate this and

[04:00] Remove this parentheses here Now that that's fixed if we inspect our council Oh We see that this message is shown for us over and over and over again So not good as we still have some holes we need to plug and

[04:26] This is where the sass library can help us once again Specifically we can turn to this harden function Which is going to be made globally available to us once lockdown is invoked Harden is going to take objects and work to them recursively

[04:50] making each property tamper proof so here we can see that we're just using it to make our counters methods tamper proof and The result of this is that Our code now throws an error Saying cannot assign to read-only property Incra

[05:12] so now let's remove this because we can no longer change the value of anything within our my counter object and Now if we go back, we'll see that our program is behaving correctly again

https://app.egghead.io/api/v1/lessons/javascript-capture-this-with-an-arrow-function/transcript

https://app.egghead.io/api/v1/lessons/javascript-this-in-class-bodies/subtitles

Instructor: [00:00] Here we have a short Person class that defines a constructor and the sayHi() method we've seen before. Now let's create an instance of that class and call the sayHi() method. As you can see, everything works fine.

[00:21] Within the constructor, "this" refers to the newly created instance of that class. When we call person.sayHi(), we invoke sayHi() as as method with person as a receiver. Therefore, the "this" binding is correct. If we store a reference to the sayHi() method, though, and later invoke it as a function, we once again lose the receiver of the method.

[00:47] The "this" argument within sayHi() is now set to undefined. This is because class bodies are implicitly in strict mode. We're invoking greet as an ordinary function. We've seen that no autobinding is happening, but we could manually call bind() to tie this sayHi() function to Person.

[01:11] A variation of this approach is to bind the sayHi() method within the constructor of the class. Another possibility would be to use a class field and an arrow function. Class fields are modern ECMAScript syntax, and they look like this. Now we no longer need to call bind() because "this" within the arrow function already refers to the instance of the class.

[01:50] My Node version doesn't support class fields yet, so I'm first going to compile my code using Babel. As you can see, the class field has been transformed into a property assignment in the constructor. I can now pipe that code into Node. Everything works as intended.

https://app.egghead.io/api/v1/lessons/javascript-this-in-class-bodies/transcript

Understand JavaScript's this Keyword in Depth

Marius Schulz

Course Content