Home > Web Front-end > JS Tutorial > In-depth analysis of variable scope in JS

In-depth analysis of variable scope in JS

小云云
Release: 2018-03-08 15:43:30
Original
1301 people have browsed it


There are two scopes of variables: global variables and local variables. This article mainly shares with you an in-depth analysis of variable scope in JS, hoping to help everyone.

Global variables

最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的:
    var n=10;
  function f1(){
    console.log(n);
  }
  f1(); // 输出10,说明全局变量n在函数内部被读取
Copy after login

Local variables

局部变量:在函数内部声明的变量。函数内部的变量,外部无法读取。
 function f1(){
    var n=10;
  }
  console.log(n); // 没有定义,说明函数内部的变量,外部无法读取。
Copy after login

Scope in ES5

for(var i =0;i<10;i++){

}
console.log(i)
Copy after login

js, what do you think will be output by this code? The answer is 10. In ES5, there are only global scope and function scope, and there is no block scope. Of course, we can implement the function of block scope. Look at the following code:

(function(){
for(var i =0;i<10;i++){

}
})()
console.log(i)
Copy after login

The answer is 1. This way of writing is called an immediately invoked function expression (IIFE). This actually creates a local scope. The variables declared in this scope are only valid within the block. , cannot be accessed externally. The advantage of this way of writing is that it does not pollute global variables.
I would like to mention one more thing here, that is, in ES5, the declaration of variables is not strict in ES5. You can directly use a=10 to declare a global variable.                                                                                                                                                                                                                                      

a=10;console.log(a)
Copy after login

Outputs 10, here you can use it without declaring a variable. In fact, js has done one thing for you. It will execute the following code:

var a=undefined;a=10;console.log(a)
Copy after login

Then let’s do something more advanced, which is variable promotion. (Concept in ES5, new usage in ES6 will not cause variable promotion), look at the code:

a=10;
(function(){console.log(a)var a=1;
})();
Copy after login

What does the above code output? Let’s analyze it:

var a=undefined;
a=10;
(function(){var a=undefined;
console.log(a)
a=1;
})();
Copy after login

Now you understand what variable promotion means. In fact, it means bringing the declaration to the front, so the output is undefined;

Scope in ES6

for(let i=0;i<10;i++){
}console.log(a)
Copy after login

Output a is not defined here, and variables declared using let cannot be used in the declaration.

a=3let a =10;alert(a)
Copy after login

will output a is not defined, why? Ruan Yifeng's ES6 says that as long as the let command exists in the block-level scope, the variables it declares will be "binding" to this area and will no longer be affected by external influences. ES6 clearly stipulates that if there are let and const commands in a block, the variables declared by these commands in this block will form a closed scope from the beginning. Any use of these variables before declaration will result in an error.

var a, b;

(function () {
    console.log(a);// undefined
    console.log(b);// undefined

    var a = b = 0;// (1)

    console.log(a);// 0
    console.log(b);// 0
})();

console.log(&#39;window&#39;, a);// window undefined
console.log(&#39;window&#39;, b);// window 0
Copy after login

Related recommendations:

Detailed explanation of variable scope of include files in php

javascript variable scope, memory, DOM leaks and other issues Detailed explanation of examples

Introduction to JavaScript variable scope examples

The above is the detailed content of In-depth analysis of variable scope in JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template