Week 4: this, Objects & Classes

1. How this Is Determined

In most languages, this (or its equivalent) always refers to the instance a method was defined on. In JavaScript, this is set fresh every time a function is called, based entirely on how it was called — not where it was written:

const user = {
  name: "Priya",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  },
};

user.greet(); // "Hi, I'm Priya" -- called AS a method of user, so this === user

const detachedGreet = user.greet;
detachedGreet(); // "Hi, I'm undefined" -- called plainly, this is no longer user

greet is the exact same function in both calls — what changed is how it was invoked. Calling user.greet() sets this to whatever comes immediately before the dot. Pulling the same function out into a plain variable and calling it directly loses that connection entirely; in a browser or Node module, this ends up undefined (in strict mode, which ES modules and classes always are).

const user = {
  name: "Priya",
  greetLater() {
    setTimeout(() => {
      // an arrow function has no `this` of its own -- it uses this
      // from wherever it was WRITTEN, i.e. inside greetLater
      console.log(`Hi, I'm ${this.name}`);
    }, 100);
  },
};

user.greetLater(); // "Hi, I'm Priya", even inside the callback

An arrow function deliberately has no this of its own — it looks up this lexically, exactly like a normal variable, from the nearest enclosing regular function. That's precisely why arrow functions are the standard choice for callbacks that need to keep using the outer this, like the setTimeout callback above.

2. call, apply & bind

These three methods, available on every function, let you control what this is explicitly, instead of relying on the call site:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Priya" };

greet.call(user, "Hello");        // "Hello, Priya" -- arguments listed individually
greet.apply(user, ["Hello"]);     // "Hello, Priya" -- arguments passed as an array

const greetPriya = greet.bind(user); // doesn't call it -- returns a new function

greetPriya("Hi");    // "Hi, Priya"
greetPriya("Hello"); // "Hello, Priya" -- this stays locked to user every time

call and apply do the same thing — invoke the function immediately with a specified this — and differ only in how the remaining arguments are passed (individually vs. as an array). bind is different: it doesn't call the function at all, it returns a new function with this permanently locked to whatever was passed in, useful for passing a method somewhere else (like an event handler) without losing its intended this.

3. Object Literals & Property Shorthand

Modern JavaScript has several shortcuts for writing objects that are worth knowing cold, because they show up in essentially every real codebase:

const name = "Priya";
const age = 29;

// Old way: repeating the key and the variable name
const userOld = { name: name, age: age };

// Property shorthand: when the key and variable name match, write it once
const user = { name, age };

// Method shorthand: no `function` keyword needed
const userWithMethod = {
  name,
  greet() {
    return `Hi, I'm ${this.name}`;
  },
};

// Computed property names: use a variable/expression AS a key
const field = "email";
const dynamicUser = { [field]: "priya@example.com" };
console.log(dynamicUser.email); // "priya@example.com"

Property shorthand and method shorthand are almost always used by default in modern code — the longer forms exist mainly so you can recognize them in older code. Computed property names matter whenever the key itself needs to come from a variable rather than being a fixed, known string.

4. Prototypes & the Prototype Chain

Every object in JavaScript has a hidden internal link to another object — its prototype — and property lookups that don't find a match on the object itself keep searching up that chain:

const animal = {
  eats: true,
  describe() {
    return `This animal eats: ${this.eats}`;
  },
};

const rabbit = Object.create(animal); // rabbit's prototype is animal
rabbit.jumps = true;

console.log(rabbit.jumps);        // true -- rabbit's own property
console.log(rabbit.eats);         // true -- not on rabbit, found on its prototype (animal)
console.log(rabbit.describe());   // "This animal eats: true" -- describe() is inherited too

rabbit doesn't have an eats property of its own — when you access rabbit.eats, JavaScript doesn't find it on rabbit, so it checks rabbit's prototype (animal), finds it there, and returns it. This is prototypal inheritance: objects inherit directly from other objects, rather than from a fixed template class the way inheritance works in most other object-oriented languages.

5. Class Syntax

class gives object-oriented code a familiar, readable shape — under the hood, it's still prototypes, just with far less boilerplate:

class Animal {
  constructor(name) {
    this.name = name; // runs once, when a new instance is created
  }

  describe() {
    return `${this.name} makes a sound.`;
  }
}

const dog = new Animal("Rex");
console.log(dog.describe()); // "Rex makes a sound."

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // must call the parent's constructor before using `this`
    this.breed = breed;
  }

  describe() {
    // reuse the parent's version, then add to it
    return `${super.describe()} It's a ${this.breed}.`;
  }
}

const rex = new Dog("Rex", "Labrador");
console.log(rex.describe()); // "Rex makes a sound. It's a Labrador."

extends makes Dog inherit from Animal — concretely, it wires Dog.prototype's prototype to Animal.prototype, the exact chain from the previous section, just built automatically. super(...) calls the parent class's constructor and is required before this can be used in a subclass constructor; super.describe() calls the parent's version of a method you're overriding, letting you extend behavior instead of replacing it outright.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.