JavaScript Object this

Understanding 'this' Context

const obj = {
    name: "Test",
    getName: function() {
        return this.name;
    }
};

function Person(name) {
    this.name = name;
}

console.log(this); // Window object in browser

obj.method(); // this = obj
method(); // this = global

🔹 'this' in Object Methods

When a function is called as an object method, 'this' refers to that object:

const calculator = {
    num1: 10,
    num2: 5,
    
    add: function() {
        return this.num1 + this.num2;
    },
    
    multiply: function() {
        return this.num1 * this.num2;
    },
    
    getInfo: function() {
        return "Calculator with numbers " + this.num1 + " and " + this.num2;
    }
};

console.log(calculator.add());      // 15
console.log(calculator.multiply()); // 50
console.log(calculator.getInfo());  // "Calculator with numbers 10 and 5"

🔹 'this' in Constructor Functions

In constructor functions, 'this' refers to the newly created object:

function Animal(name, species) {
    // 'this' refers to the new Animal object being created
    this.name = name;
    this.species = species;
    
    this.introduce = function() {
        return "Hi, I'm " + this.name + ", a " + this.species;
    };
    
    this.makeSound = function(sound) {
        return this.name + " says " + sound + "!";
    };
}

const dog = new Animal("Buddy", "dog");
const cat = new Animal("Whiskers", "cat");

console.log(dog.introduce());        // "Hi, I'm Buddy, a dog"
console.log(cat.makeSound("meow"));  // "Whiskers says meow!"

🔹 'this' Binding Examples

The value of 'this' depends on how the function is called:

const user = {
    name: "Sarah",
    age: 28,
    
    getDetails: function() {
        return "Name: " + this.name + ", Age: " + this.age;
    }
};

// Method call - 'this' refers to user object
console.log(user.getDetails()); // "Name: Sarah, Age: 28"

// Store method in variable
const getDetails = user.getDetails;

// Function call - 'this' refers to global object (undefined in strict mode)
// console.log(getDetails()); // Would cause error or unexpected result

// Solution: Use bind, call, or apply
const boundGetDetails = user.getDetails.bind(user);
console.log(boundGetDetails()); // "Name: Sarah, Age: 28"

🔹 Arrow Functions and 'this'

Arrow functions don't have their own 'this' - they inherit it from the surrounding scope:

const team = {
    name: "Developers",
    members: ["Alice", "Bob", "Charlie"],
    
    // Regular function - has its own 'this'
    showTeamRegular: function() {
        console.log("Team: " + this.name);
        
        // Arrow function - inherits 'this' from showTeamRegular
        this.members.forEach(member => {
            console.log(this.name + " member: " + member);
        });
    },
    
    // Arrow function as method - 'this' refers to global object
    showTeamArrow: () => {
        console.log("Team: " + this.name); // 'this' is not the team object
    }
};

team.showTeamRegular();
// Output:
// Team: Developers
// Developers member: Alice
// Developers member: Bob
// Developers member: Charlie