The scope of JavaScript determines the accessibility scope of variables, which are divided into global, function and block-level scope; the context determines the direction of this and depends on the function call method. 1. Scopes include global scope (accessible anywhere), function scope (only valid within functions), and block-level scope (let and const are valid within {}). 2. The execution context contains the value of variable objects, scope chains and this. This points to global or undefined in the normal function, the method call points to call objects, and the constructor points to new objects, and can also be explicitly specified by call/apply/bind. 3. Closure refers to functions accessing and remembering external scope variables. They are often used for encapsulation and cache, but may cause memory leaks. 4. Context loss is common in callback functions, and solutions include binding, constructor binding, or using arrow functions.

JavaScript's scope and context are key to understanding the behavior of this language, but they are often confused. Scope determines the accessibility of variables, while context determines the pointing of this . Mastering the differences and mechanisms between the two can help write clearer and more stable code.

Scope: The scope of the variable being accessible

In JavaScript, scope determines whether a variable can be accessed. The three most common scopes are:

• Global scope : accessible anywhere.
• Function scope (local scope) : Only valid inside the function that defines it.
• Block-level scope (introduced by ES6) : defined by let and const , valid inside {} .

For example:

 if (true) {
  let blockVar = 'I am block scoped';
}
console.log(blockVar); // Error: blockVar is not defined

let is used here, so the variable only exists in if block. If changed to var , it will be promoted to the function or global scope.

Scope chain is when you access a variable in a function, JavaScript will first look at whether there is this variable in the current scope. If not, look up until the global scope.

Execution context vs. this: "environment" when function runs

The execution context is an internal environment when JavaScript executes code. A new execution context is created every time the function is called. It contains three parts:

1. Variable Object (VO)
2. Scope Chain
3. The value of this

The point is this , its value is not written dead, but depends on how the function is called.

Several common situations:

• Normal function calls: this points to the global object ( window in the browser, undefined in strict mode)
• Method call: this points to the object that calls it
• Constructor call: this points to the newly created object
• Use call / apply / bind : this is specified explicitly

For example:

 const user = {
  name: 'Tom',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // Output Hello, Tom, this point to the user object

Closure: Remember the scope of its birth

A closure is a function that has permission to access variables in another function scope. Simply put, it is a function that remembers the environment it was defined in.

for example:

 function outer() {
  let count = 0;
  return function inner() {
    count ;
    console.log(count);
  };
}

const counter = outer();
counter(); // Output 1
counter(); // Output 2

The inner function forms a closure that retains references to count variable. Even if outer has been executed, count will not be cleared by the garbage collection mechanism.

Closures are often used to encapsulate data, cache, modularization and other scenarios, but they are also prone to memory leakage. Pay attention to cleaning up useless references when using them.

Context Loss Issues: Common Points

In actual development, the context of this is easily "lost", especially in callback functions or event processing.

For example:

 const button = document.querySelector('button');
button.addEventListener('click', user.greet); // An error is reported, this.name is undefined

At this time, the greet method is passed in as a callback, this no longer points to user . The solution is to bind the context:

• Use .bind(this)
• Bind in constructor
• Use arrow functions (because arrow functions do not bind their own this )

 button.addEventListener('click', user.greet.bind(user));

Basically that's it. Although the scope and context are conceptually abstract, it is not difficult to understand as long as it is combined with the specific calling method. The key is to observe more about how the function is called and where the variable is defined.

The above is the detailed content of Advanced JavaScript Scopes and Contexts. For more information, please follow other related articles on the PHP Chinese website!