Graphical explanation of the underlying principle of JavaScript scope chain

Preface

When learning JavaScript, everyone must know that the external space cannot access internal variables. We often only know this basic rule, so what is the basic underlying principle to implement this basic rule? Today I will show you how to understand the scope chain from a white man's perspective, hoping to give you some help!

Scope

1. What is scope?

Simply put, scope is a set of rules for searching variables by name. The scope can be generally understood as a closed space. This space is closed and will not affect the outside. The external space cannot access the internal space, but the internal space can access the external space that wraps it.

2. [[Scopes]] Property

In JavaScript, each function is an object. We can access some properties of the object, but we cannot freely access some of them. The [[Scopes]] property is one of them. This property can only be read by the JavaScript engine.

In fact, [[scope]] is what we often call the scope, which stores the context collection of the scope runtime.

Here, because func.prototype.constructor and func point to the same function, we view the [[Scopes]] property by accessing the prototype object of the function func

3. Scope Chain

The collection of execution context objects stored in [[scope]] is linked together, and we call this chain connection a scope chain. JavaScript searches for variables through the scope chain, and searches from the top of the scope chain downwards (the scope chain of the function in which the object is searched is searched).

4. Graphical explanation of the principle of finding variables

//Take the following code as an example to illustrate the principle of JavaScript searching for variables through the scope chain**
function a() {
  function b() {
  //The original value of b I gave here was 234, but the comment section reminded me that the following figure was written as 123, so I changed the value of b to 123
      var b = 123;
  }
  var a = 123;
  b();
}
var glob = 100;

1. When the global function a() is defined, the scope chain is as follows

The [[Scopes]] property of a function points to the scope chain object. At this time, the scope chain has only one key-value pair, which points to the global object. The global object stores things that can be accessed globally, that is, the outermost scope, which is accessible to everyone.

2. When the global function a() is activated and called, the scope chain is as follows

At this time, the first thing the scope chain can access is the key-value pair in the Activation Object. If there is no key-value pair, the global object is accessed.

3. When function b is defined in function a(), the scope chain of b is as follows

When b is just defined but not called, the scope chain of b is the same as that of a.

4. When function b in function a() is activated and called, the scope chain is as follows

The scope chain first points to the Activation Object of function b(). The search for variables is also accessed in the order of the scope chain, and stops when it finds one.

Summarize

The reason why the outer scope cannot access the inner scope is that the scope chain of the outer scope does not have the Activation Object of the inner scope, so it cannot access the internal variables. The order in which the inner scope accesses variables is according to the scope chain. First look inside, if not found, look outside along the application scope chain. The outer scope is the global scope.

This is the end of this article about the underlying principles of JavaScript scope chain. For more relevant JavaScript scope chain content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!