Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to demonstrate the basis of JS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to demonstrate the basis of JS".

Code case

Var b = 10; (function b () {b = 20; console.log (b);}) ()

What does this code output?

(ps: don't rush to answer, think about it.)

At first glance, this code is very simple, the content involved is var function IIFE, and there seems to be no problem.

The output of this code in strict mode: TypeError: Assignment to constant variable

It means: type error: assignment of constant variables

Output in non-strict mode:

Output analysis

Analyze the output in strict mode by this TypeError: Assignment to constant variable. If you do an analysis, it means that the variable b is immutable!

So the question now is whether the variable b refers to the variable b declared externally in var or the named function b that is executed immediately.

If b is the name of a named function that is executed immediately, to be honest, I'm not sure if it's modifiable.

(ps: most js books do not explicitly indicate whether immediate execution of function expressions can be reassigned.)

But what I'm sure of is that if b is declared externally with var, then it must be modifiable in this code. We all know that a global variable declared in var must be modifiable anywhere because it is at the top of the scope.

So here I want to make a bold assumption: the variable b refers to the named function name b ~ which is executed immediately.

After making this assumption, I want to say:

Does that mean that the global variable b cannot be accessed in the named function b that is executed immediately?

In fact, it is not, the global variable b is accessible in the named function b that is executed immediately, but because there is a variable b declared with function in the internal scope of the named function b, so the js engine first finds the variable b declared with function when the code is executed. As mentioned in the book, the scope query is done by querying from the inside out.

(ps: I also wrote an article about scope series before: this is how I understand the scope in JavaScript. I hope I can help you ~)

Of course, in non-strict mode, you can try to print window.b in the named function that is executed immediately, or you can demonstrate that the global variable b can be accessed in the named function b that is executed immediately! The code is as follows:

Var b = 10; (function b () {b = 20; console.log (window.b);}) ()

At this point, with a clear understanding of the internal scope mechanism for immediately executing function b, my question arises again:

Why can't function expressions like (function b () {} ()) be modified?

Later, I looked up the data and understood the internal mechanism of the IIFE function.

What I understand is:

When a named function expression is encountered, an auxiliary specific object is created, and the name of the function expression is used as a unique key to store the name of the function expression, and then added to the function's scope chain. The value is read-only and cannot be deleted, so the value cannot be manipulated.

So, in strict mode, an immutable constant is reported to TypeError: Assignment to constant variable after it is modified.

Analyze the output of non-strict mode will silently fail in non-strict mode, so do not report an error. After the above analysis, the named function b itself, which is executed immediately, is output.

Code extension

I rewrote the code to:

Var b = 10; (function b () {return 1;}) (); console.log (b)

What will be output from this section?

Whether in non-strict mode or in strict mode, this code outputs 10, that is, the value of the global variable b ~

The original intention of writing this code is not to guess the result. What I want to express is: why is it externally inaccessible to execute the named function b immediately? Are all expressions inaccessible externally?

In order to solve my question, I analyze it through the following functions: foo1 and foo2:

/ / fragment 1 var foo1 = function () {}; console.log (foo1); / / fragment 2 (function foo2 () {}) console.log (foo2)

Segment 1

Is to have an anonymous function expression assign a value to the variable foo1, which can then be accessed under the name foo1-- foo1 (). So printing is a function.

Segment 2

Is a function expression, but the result is Uncaught ReferenceError: foo2 is not defined. The description is inaccessible externally.

As you can see, executing the named function b immediately is a function expression that is inaccessible externally. (ps: means that a function expression cannot be called either by name before a function declaration or after it is declared.)

In fact, the code introduced in most books and snippet 1 that I understood before is a functional expression. But now my understanding is not like this.

Foo1 is a variable, the anonymous function expression is assigned to the variable foo1, so foo1 it can be accessed!

By writing 2 code snippets by myself, my doubts were easily solved.

Think about other cases

In my spare time, I modified the most original code blocks and used them to review and think about the theoretical basis of my previous study.

In the following code snippet, I will also announce the results with you, but I will also share my experience with you.

/ / fragment 1 var b = 10; function b () {console.log (12); return 1;} console.log (b, b ()); / / 10 TypeError: b is not a function

Why print 10 instead of function b?

Argument: function declaration takes precedence over variable declaration

So, it is equivalent to declaring the function b with function, and then rewriting it with var.

/ / fragment 2 console.log (b, b ()); / / 121 var b = 10; function b () {console.log (12); return 1;}

Why print the execution results 12 and 1 of function b instead of the global variable b?

Argument: function declaration takes precedence over variable declaration and there is variable promotion in the process.

Segment 3

Var b = 10; b = function () {b = 20; console.log (b); / / 20 return 1;}; console.log (b, b ()); / / b function, 1

Why print 10 instead of function b?

Argument: this process is to reassign the variable b.

So, 10 is printed, not a function.

Segment 4

Var b = 10; / / Duplicate declaration "b" let b = function () {b = 20; console.log (b); return 1;}

Argument: declaring variables with var can be repeatable, but declaring variables with let is not repeatable.

So after the js engine finished executing the var b = 10 statement, it reported an error when it encountered let b.

Thank you for your reading, the above is the content of "how to demonstrate the basis of JS". After the study of this article, I believe you have a deeper understanding of how to demonstrate the basis of JS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.