Tim Williams Portfolio

Javascript 'this' binding and OOP JS

In this post we will explore how the this keyword is set in javascript and how you can manipulate it. We will then explore what kind of real world use cases to try and solidify our understanding of it and explore how it relates to OOP style Javascript.

Published on: 2019-07-18, last updated on: 2019-07-25

Find an error? Think I'm a big dummy and wrote something stupid? Edit this post on Github!

Table of Contents

  1. Fundamentals & Function Creation

  2. This and object Binding

  3. Taking a deeper look at Bind

  4. OOP JS Time

  5. Challenges:

  6. Resources:

Fundamentals & Function Creation

Let's start off with simple function creation, some basic keywords in the Javascript language and some newer ES6 features. Keywords are things that are built into a programming language, in other instances you'd need to define things before you use them but keyword are always available to you.

Arguments

The arguments keyword, as the name might give away, is a keyword that you can use to access all arguments passed to a function, even if you don't have them listed in the function definition's parameters. In Javacript we can pass as many parameters we want into our tacos function and access them through the arguments array.

function tacos() {
  console.log(arguments);
}

tacos('are', 'my', 'favorite', '🌮!');
> Arguments(4) ["are", "my", "favorite", "🌮!"]
  > 0: "are"
  > 1: "my"
  > 2: "favorite"
  > 3: "🌮!"

As you can see we aren't taking any parameters in the function definition but when we called it everything we passed in is available in the arguments array. If we had named parameters in the definition, they would simply have been assigned in order (e.g. arguments[0] set equal to the first parameter, and so on).

This

The this keyword is a little bit more tricky, in traditional OOP style languages this (or self in some languages like Python) refers to the instace of the class that you are currently on. For the most part this also holds true in Javascript however this can take on a much larger role as we will explore in this post, for now just know that it's available to use as a keyword and it does have some defaults, in the browser you can try it out like so: 

  console.log(this === window);
  > true
  var person = {
    name: 'Sir Taco III',
    sayName: function() {
        console.log(this.name);
    }
  }
  person.sayName()
  > Sir Taco III
Arrow Functions, Rest and Spread operators

Arrow functions, Rest and Spread operators, if you've written Javscript recently you've probably heard of these but we'll do a very fast overview with examples to see what they do.

Post under construction below, sorry for our dust!

Construction Time

this and object Binding

Context, what determines the value of this? Rule #1: Global Object Binding Rule #2: Implicit Object Binding Rule #3: Explicit Object Binding Rule #2: The new Keyword Call(), Apply() and Bind() Closures and this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Taking a deeper look at Bind

OOP JS Time!

Factory Function Example, (what it is and and how its used) Multiple Constructors (sharing types of data between objects) ('constructor stealing', object masquerading or classical inheritance)

Challenges:

Write your own new function - (Codewars link to test out their own answer)

Resources: