Skip to main content

Creating a Tic Tac Toe game in React

· 3 min read
Parth Maheta

In JavaScript, the this keyword is a special keyword that refers to the current execution context. Its value is determined by how a function is invoked. Understanding how this behaves is crucial for working with functions and objects in JavaScript.

Global Context​

In the global context (outside any function), this refers to the global object. In a browser environment, the global object is usually window.

console.log(this); // points to the global object (window in a browser)

Function Context​

In a function, the value of this depends on how the function is called.

Regular Function​

For a regular function (not an arrow function), this refers to the object that invokes the function.

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

sayHello(); // points to the global object (window in a browser)

Method​

When a function is a method of an object, this refers to the object on which the method is invoked.

const myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // points to myObject

Arrow Functions​

Arrow functions behave differently regarding this. They don't have their own this context; instead, they inherit this from the enclosing scope.

const myObject = {
  myMethod: function() {
    const innerFunction = () => {
      console.log(this);
    };
    innerFunction();
  }
};

myObject.myMethod(); // points to myObject, because arrow function inherits this from myMethod

Event Handlers​

In the context of event handlers, this often refers to the DOM element that triggered the event.

<button onclick="console.log(this)">Click me</button>

Constructor Functions​

In the context of constructor functions (functions used with the new keyword), this refers to the newly created object.

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

const john = new Person('John');
console.log(john.name); // John

Explicit Binding​

You can explicitly set the value of this using methods like call, apply, or bind.

function sayName() {
  console.log(this.name);
}

const person = { name: 'John' };

sayName.call(person); // John
sayName.apply(person); // John

const sayNameForPerson = sayName.bind(person);
sayNameForPerson(); // John

this in Arrow Functions​

As mentioned earlier, arrow functions don't have their own this. They inherit this from the enclosing scope.

function outerFunction() {
  const innerFunction = () => {
    console.log(this);
  };

  innerFunction();
}

const obj = { prop: 'value' };

outerFunction.call(obj); // points to obj, because arrow function inherits this from outerFunction

Understanding the different scenarios in which this behaves is crucial for effective JavaScript programming. It's important to be aware of how this behaves in different contexts to avoid unexpected behavior in your code.