The reason why I write this article is mainly because I found a bug when refactoring the old project, which caused a plug-in not to take effect. After the review, search code and breakpoint debugging, I found the reason: a variable with the same name overwrites the plug-in method, ohmyGad.

The body of the

1. How are variables covered

In general, js code is executed from top to bottom. For the same variable, we can modify it in the following ways:

var a = 1;
a = 2;
console.log(a)   / / 2
a = function(){};
console.log(a)   // function(){};
Copy the code

2. Variable improvement

The above coverage process is well understood, but what about the following operation?

console.log(a);
var a = 1;
console.log(b);
var b = function(){};
Copy the code

Console.log () will output undefined without an error. Why? Here’s where the variable lift comes in. When we define a variable as a var or function declaration, the definition of the variable is promoted to the top of the method body, as shown below:

var a = undefined;
var b = undefined;
console.log(a)
// ..
console.log(b)
Copy the code

So we come to a conclusion:

Function and variable declarations are always quietly “promoted” by the interpreter to the top of the method body.

It is worth noting that when we define variables with let, const, there is no promotion because there is a notion of local (block) scope, and there is a temporary dead zone, so printing variables before them will report an error. For those of you who don’t know much about temporary dead zones or ES6,

Quickly grasp es6+ new features and ES6 core grammar inventory;

Let and const are described in detail, as well as the new features of ES6.

3. One step closer — the priority of variable promotion

Directly dissecting the problem:

var a = 1;
function a(){
    console.log(a)
}
console.log(a)
Copy the code

So what’s the code going to print? The answer is it will print 1. This question is one of the most frequent errors I’ve encountered in interviews with candidates, and it hides the notion that function declaration promotion takes precedence over variable declaration promotion. The browser’s implementation is as follows: when the JS parser encounters a function declaration, it will first promote it to the top of the body, followed by the var declaration. This will result in function a being overwritten by the variable a, so it will print 1.

4. Function parameter scope and scope chain

Scope is the scope within which variables and functions are accessible. When code is executed in an environment, a scope chain of variable objects is created to ensure sequential access to variables and functions that are accessible to the execution environment. The first object in the scope is always a variable object in the context of the currently executing code. It then looks up and down until it finds the first variable specified.

With that in mind, let’s look at the following question:

var a = {name: 'xuxi'};
function b(a){
    a.age = 12;
    a = {num: 1};
    return a
}
var a1 = b(a);
console.log(a, a1)
Copy the code

What does the above code print? In fact, this is the interview question I set today, or because a friend asked me this question before, I think it is necessary to summarize. Today’s candidate didn’t answer, but I’m sure he deserves the trip after explaining it to him (yes, sorry).

This is primarily a function internal scope and reference type issue. The specific process is as follows:

(1) before we according to the introduction of the concept of the scope and the scope chain can know, in the function body, the variable will find nearby, and the function parameter scope will exist in the function body interior, so when we use global variables as a reference when passed to a function, and because of the global is a reference type, only cited its address at this time, So when we set the property with a.age, global A will also change. (2) The second step is to assign a new value to a. At this time, the value of a is actually a parameter a according to the nearest search. Essentially, the parameter A is assigned to a new object, which has nothing to do with the global variable a.

A: {name: ‘xuxi’, age: 12}; a1: {num: 1}

conclusion

Function declaration promotion, variable scope, and scope chain have always been the basis and focus of learning javascript, so hopefully this article will help you understand it better. If you want to learn more about webpack, node, gulp, CSS3, javascript, nodeJS, Canvas and other front-end knowledge and actual practice, welcome to join us in the public account “Interesting Talk front-end” to learn and discuss, and jointly explore the boundary of the front-end.

More recommended

  • “Front-end combat summary” how to change the URL without refreshing the page
  • Front-end component/library packaging sharp Rollup use and configuration combat
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Learn es6+ new features and es6 core grammar check quickly
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • Implement server startup details for a CMS full stack project from 0 to 1 based on nodeJS
  • Developing travel List with Angular8 and Baidu Maps API
  • “Javascript advanced programming” core knowledge summary
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Write a mock data server using nodeJS in 5 minutes
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)