The 'this' Keyword in JavaScript

Description
In JavaScript, this is a keyword that refers to different objects depending on the execution context. The binding of this is dynamic, determined by how a function is called, not where it is defined. Understanding the binding rules of this is key to mastering core JavaScript concepts.

Solution Process

1. Default Binding (Standalone Function Call)

   • When a function is called independently (not attached to any object), this defaults to the global object (window in browsers, global in Node.js).
   • Example:

     function showThis() {  
       console.log(this); // In browsers: outputs the Window object  
     }  
     showThis(); // Direct call  
     

   • Note: In strict mode ("use strict"), this is undefined, preventing accidental binding to the global object.

2. Implicit Binding (Method Call)

   • When a function is called as a method of an object, this refers to the object that invoked the method.
   • Example:

     const obj = {  
       name: "Alice",  
       greet: function() {  
         console.log(this.name); // Outputs: "Alice"  
       }  
     };  
     obj.greet(); // Calling greet via obj  
     

   • Pitfall: If the method is assigned to a variable and then called, the original binding is lost, reverting to default binding:

     const func = obj.greet;  
     func(); // Outputs: undefined (or throws an error in strict mode)  
     

3. Explicit Binding (call/apply/bind)

   • Use the call, apply, or bind methods to forcibly specify the binding of this.
     • call and apply execute the function immediately, differing in how arguments are passed (call passes arguments individually, apply passes them as an array).
     • bind returns a new function with a specific this binding, without immediate execution.
   • Example:

     function introduce(lang) {  
       console.log(`${this.name} speaks ${lang}`);  
     }  
     const person = { name: "Bob" };  
     introduce.call(person, "English");    // Outputs: "Bob speaks English"  
     introduce.apply(person, ["Spanish"]); // Outputs: "Bob speaks Spanish"  
     const boundFunc = introduce.bind(person);  
     boundFunc("French"); // Outputs: "Bob speaks French"  
     

4. new Binding (Constructor Call)

   • When a constructor function is called with the new keyword, this is bound to the newly created object instance.
   • Example:

     function Person(name) {  
       this.name = name;  
     }  
     const alice = new Person("Alice");  
     console.log(alice.name); // Outputs: "Alice"  
     

5. Arrow Function's this

   • Arrow functions do not have their own this. Their this is lexically inherited from the enclosing scope (the context where they are defined) and cannot be modified by explicit binding.
   • Example:

     const obj = {  
       value: "hi",  
       regularFunc: function() {  
         console.log(this.value); // Outputs: "hi" (implicit binding)  
       },  
       arrowFunc: () => {  
         console.log(this.value); // Outputs: undefined (inherits `this` from the global scope)  
       }  
     };  
     obj.regularFunc();  
     obj.arrowFunc();  
     

Priority Summary
new binding > explicit binding > implicit binding > default binding. The this of an arrow function is determined at definition and has the highest priority (unaffected by the call method).