Why Use `var that = this;` in JavaScript?

Understanding 'var that = this;' in JavaScript

In JavaScript, the 'this' keyword represents the current object. Assigning 'this' to 'var that' allows developers to maintain a reference to the original object reference which can be accessed later, even within nested functions where 'this' may change.

Consider the following code snippet:

function Somefunction(){
   var that = this; 
   ... 
}

Here, assigning 'this' to 'that' ensures that within the 'Somefunction' scope, 'that' always refers to the original object instance. This is beneficial when working with closures or event handlers where the 'this' reference might change after invoking a nested function.

To illustrate, suppose you have a function that listens for a 'click' event on an element:

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

Within the event handler, 'this' refers to the element that was clicked, but inside the inner 'forEach' function, 'this' becomes undefined. By aliasing it to 'that', you can still access the original reference to the clicked element.

In conclusion, 'var that = this;' ensures that a consistent reference to the current object is maintained, making it especially useful in event handling or closure scenarios where 'this' can change dynamically. However, consider using a more descriptive alias for clarity, such as 'clickedEl' or 'currentElement', to make code intent more apparent.

The above is the detailed content of Why Use `var that = this;` in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!