What is This

An overview of JavaScript Classes, this keyword, and explicit function binding

Background

After first learning Ruby in Flatiron’s Software Engineering Bootcamp, JavaScript was at times a bit difficult to understand. When working with Ruby, and it’s popular framework Ruby on Rails, you write code that is encapsulated almost exclusively in classes. You take a blueprint, and instantiate many people with that blueprint. In JavaScript, you have many people, with no blueprint. While ES6 introduced a class structure to JavaScript in 2015, JavaScript is still not intended to be an Object-Oriented language. You can read all about why you shouldn’t be using classes in JavaScript here, but the truth is, classes in JavaScript aren’t going anywhere, and can be helpful in code organization. Here are some things that you should know before using JS classes:

This Keyword

Along with scope, this is arguably the most important concept in JavaScript. Here are the general rules regarding what this refers to:

// Open up a console in chrome and follow along
// Global context
this // Returns Window Object
// Function in global context 
function globalFunc() {
  return this
}
globalFunc() // Returns Window Object
globalFunc() === this // true
// Class Instance Method
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName // Sets first name
    this.lastName = lastName // Sets last name
  }
  sayName() {
    // this refers to instance of class
    console.log(this.firstName + ' ' + this.lastName)
  }
}
let johnSmith = newPerson('John', 'Smith') // Instantiate new person
johnSmith.sayName() // Logs 'John Smith' to console
// Event Handlers
let body = document.getElementsByTagName('body')[0] 
body.addEventListener('click', function(e) {
  console.log(this) // logs body element when body is clicked
}

It may seem pretty straightforward at first, but what happens when you want this to refer to the global object when you’re inside of an event callback function? We can achieve this with the bind keyword

Bind Keyword

MDN’s Javascript Documentation defines bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Put more simply, bind allows us to change the value of this

this // returns Window Object
let body = document.getElementsByTagName('body')[0];
body.addEventListener('click', function(e) {
  console.log(this)
}.bind(this));
// On click, logs Window Object to Console
// Without .bind(this), it would log the body element to the console

Additionally, we can use bind to ‘borrow’ methods from other objects in the following manner:

let person = {
  name: 'John Smith', 
  sayName: function() {
    console.log('My name is ' + this.name)
  }
}
let car = {
  name: 'Herbie'
}
let sayName = person.sayName.bind(car)
person.sayName() // My name is John Smith
sayName() // My name is Herbie

While using bind, it is important to note that the time of function execution is in the future, versus call or apply, where the time of execution is now.

Conclusion

When coming from a background in Object Oriented programming, learning JavaScript can be a daunting task. It’s not as easy to read as other languages, and can be hard to keep track of when code is being executed. With some practice and the logging of this to the console, it wasn’t long before I started to use it naturally in my code, and is an important step in tackling JS. Be patient, and happy coding.