`this` Used In Objects

this is one of the most tricky concepts in JavaScript. Fully understanding this topic sets us apart from the other devs in job interviews.

Previsouly I wrote a post Learn From Mistakes I Made With this in JS, which is about handling this used in a function passed as a reference to another function. Here is a continued part talking more about this when it's used with objects. Here's an example:

function makeFox() {
  return {
    name: 'fox',
    ref: this
  }
}

const fox = makeFox();
fox.ref.name // what's the result?

The code results in an error calling .name on undefined. This is because this refers to the context of the function makeFox, not the object returned from it. Here's a way to fix this problem:

function makeFox() {
  return {
    name: 'fox',
    ref() {
        return this;
    }
  }
}

const fox = makeFox();
fox.ref().name // 'fox'

By making ref a function, this becomes dynamic. Its value depends on the object which evokes this function. In this case, the calling object is fox.

Takeaway

Ring off the alarm in your brain once you see this is exposed without being wrapped within a code block as a property of an object. For example,

let obj = {
  prop: this
}

Chances are a mistake has been made unconciously.