JavaScript this and new Keyword

JavaScript this Keyword

JavaScript this keyword refers to the current object. In other words, while executing every JavaScript function has a reference to its current execution context, known as this. In simple, here execution context means how the function is called. JavaScript this has different values depending on where it is used-

Global Context:-

Object's Method:-

The call(), apply() and bind() Method:-

JavaScript new Keyword

The new keyword is used to create an instances of objects from a constructor function, which has to be placed before the constructor function call and will do the following-

It creates a new object and the type of this object is simply object.
It sets the new empty objects invisible prototype property(i.e. __proto__) to be the constructor function visible and accessible prototype property.
It binds this keyword to the newly created object and executes the constructor function.
It returns the newly created object.

Note:- In JavaScript, every function has visible prototype property whereas every object includes invisible prototype property.

example

function TutorialsLogic(tutorial) {
  this.tutorial = tutorial;
}
const site = new TutorialsLogic('JavaScript');
console.log(site.tutorial); // JavaScript
console.log(site.__proto__ === TutorialsLogic.prototype); // true

this in Different Contexts

The value of this depends entirely on how a function is called, not where it is defined.

this Contexts

// 1. Global context - this = window (browser) or global (Node.js)
console.log(this === window); // true (browser)

// 2. Object method - this = the object
const person = {
  name: 'Alice',
  greet() {
    return `Hello, I am ${this.name}`;
  }
};
console.log(person.greet()); // Hello, I am Alice

// 3. Regular function - this = undefined (strict) or window (non-strict)
function show() {
  console.log(this); // window or undefined
}

// 4. Arrow function - this = inherited from enclosing scope
const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++; // 'this' refers to timer object
      console.log(this.seconds);
    }, 1000);
  }
};

// 5. Event handler - this = the element that fired the event
document.getElementById('btn').addEventListener('click', function() {
  console.log(this); //

call(), apply(), and bind()

These three methods let you explicitly set the value of this when calling a function.

call, apply, bind

function introduce(greeting, punctuation) {
  return `${greeting}, I am ${this.name}${punctuation}`;
}

const user = { name: 'Bob' };

// call - invoke immediately, args passed individually
console.log(introduce.call(user, 'Hello', '!'));
// Hello, I am Bob!

// apply - invoke immediately, args passed as array
console.log(introduce.apply(user, ['Hi', '.']));
// Hi, I am Bob.

// bind - returns a NEW function with 'this' permanently bound
const boundIntro = introduce.bind(user, 'Hey');
console.log(boundIntro('?'));
// Hey, I am Bob?

// Practical: borrowing methods
const arr = [3, 1, 4, 1, 5, 9];
const max = Math.max.apply(null, arr);
console.log(max); // 9
// Modern equivalent:
console.log(Math.max(...arr)); // 9

Key Takeaways

this refers to the object that is currently executing the function - it changes based on how the function is called.
Arrow functions do NOT have their own this - they inherit it from the surrounding lexical scope.
call() and apply() invoke a function immediately with a custom this; bind() returns a new bound function.
The new keyword creates a new object, sets its prototype, binds this to it, and returns it.
In strict mode ("use strict"), this inside a regular function is undefined instead of the global object.
Use bind() to fix this in callbacks and event handlers where context would otherwise be lost.

JavaScript this and new Keyword

JavaScript this Keyword

JavaScript new Keyword

this in Different Contexts

call(), apply(), and bind()

Ready to Level Up Your Skills?