this Keyword

Global this

In the Browser

// Global scope
console.log(this); // Window object

// In strict mode
'use strict';
console.log(this); // undefined

In Node.js

// Global scope
console.log(this); // {}

// Module scope
console.log(module.exports); // {}

Function Calls

function sayHello() {
  console.log(this);
}

sayHello(); // Window (non-strict) or undefined (strict)

// Call/Apply/Bind
sayHello.call({ name: 'John' }); // { name: 'John' }

this in Different Contexts

Strict Mode

// Non-strict: this is Window
function test() {
  console.log(this); // Window
}

// Strict: this is undefined
'use strict';
function test() {
  console.log(this); // undefined
}

Object Methods

Object Method this

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}`); // "John"
  }
};

person.greet(); // this is person

this Depends on Call

const person = {
  name: 'John',
  greet() {
    console.log(this.name);
  }
};

const anotherPerson = { name: 'Jane' };

person.greet();          // "John"
anotherPerson.greet = person.greet;
anotherPerson.greet();   // "Jane"

const greet = person.greet;
greet();                 // undefined (global)

Method Extraction Problem

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greet = person.greet;
greet(); // "Hello, undefined" (this is wrong!)

// Solutions:
// 1. Bind
const boundGreet = person.greet.bind(person);
boundGreet(); // "Hello, John"

// 2. Arrow function in method
const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, ${this.name}`); // this is NOT person!
  }
};

// 3. Store reference
const person = {
  name: 'John',
  init() {
    this.greet = () => {
      console.log(`Hello, ${this.name}`);
    };
  }
};

Nested Objects

const obj = {
  name: 'outer',
  nested: {
    name: 'inner',
    greet() {
      console.log(this.name); // "inner"
    }
  }
};

obj.nested.greet(); // "inner" (this is nested)

Method Chaining

const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this; // Enable chaining
  },
  subtract(n) {
    this.value -= n;
    return this;
  },
  result() {
    return this.value;
  }
};

calculator.add(5).subtract(2).result(); // 3

Arrow Functions and this

Lexical this

Arrow functions don't have their own 'this' - they inherit from the enclosing scope.

const person = {
  name: 'John',
  greet: () => {
    // 'this' is NOT person!
    console.log(this.name); // undefined
  }
};

person.greet(); // undefined

When to Use Arrow Functions

// Good: callbacks
setTimeout(() => {
  console.log(this.name); // Correct 'this'
}, 1000);

// Good: array methods
const numbers = [1, 2, 3];
numbers.map(n => n * 2);

// Bad: object methods
const obj = {
  name: 'John',
  greet: () => {
    console.log(this.name); // undefined
  }
};

Object Method Workaround

// Use regular function for methods
const person = {
  name: 'John',
  greet() {
    console.log(this.name); // "John"
  }
};

// Or use arrow in property with function
const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // "John"
  }
};

// Or define in constructor
function Person(name) {
  this.name = name;
  this.greet = () => {
    console.log(this.name);
  };
}

Class Example

class Timer {
  constructor() {
    this.seconds = 0;
  }
  
  start() {
    // Arrow function inherits 'this' from class
    this.interval = setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
  
  stop() {
    clearInterval(this.interval);
  }
}

Event Handlers

// Arrow function: this is not the element
button.addEventListener('click', () => {
  console.log(this); // Window, not button!
});

// Regular function: this is the element
button.addEventListener('click', function() {
  console.log(this); // button
  this.classList.add('active');
});

Summary Table