Detailed explanation of the difference between scope and block-level scope in Javascript

Scope is always the top priority in any programming language, because it controls the visibility and life cycle of variables and parameters. Let me introduce to you the scope and block-level scope in Javascript. Friends who need it can refer to it

1. Description of block-level scope

Before learning the variable scope of JavaScript, we should clarify a few points:

a. The variable scope of JavaScript is based on its unique scope chain.

b. JavaScript does not have block-level scope.

c. The variables declared in the function are defined throughout the function.

The variable scope of javascript is different from the C-like language commonly used. For example, the code in C#:

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}

This code cannot be compiled because "the current context does not Number".

exists because the scope of the variable here is limited by curly braces, which is called block-level scope.

In the block-level scope, all variables are within the defined curly braces. They can be used in the range from the beginning of the definition to the end of the curly braces. They cannot be accessed outside this range, that is to say

if（true）
{
  int number=10;
  Console.WriteLine(number);
}

This can be accessed because the definition and use of variables are within the same curly braces.

But there is no concept of block-level scope in JavaScript.

2. Scope in javascript

1. Function limited variable scope

In javascript, inside the function The defined variables can be accessed inside the function, but cannot be accessed outside the function. Code:

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>

When the code is run, an exception will be thrown. The variable number is not defined because it is defined in the function. Variables cannot be used outside the function, but can be used arbitrarily within the function, even before assignment:

<script type="text/javascript">
 var num=function(){
    alert(number);
    var number=10;
    alert(number);
 };
 try{
   num();
 }catch(e){
  alert(e);
 }
</script>

After this code is run, no error will be thrown, and it will pop up twice, namely undefined and 10

2. Subdomain accesses parent domain

The function can limit the scope of the variable, then the function in the function is the subdomain of the scope, and the function in the subdomain The code can access the variables in the parent domain. The code is as follows:

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>

The result of executing this code is 10, but accessing the code of the parent domain in the child domain is also conditional

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      var num=20;
      alert(num);
    };
   sub_func();
};
func();
</script>

This code has one more "var num=20;" than the previous one. This code is in the subdomain, so the situation of the subdomain accessing the parent domain has changed. The result printed by this code is 20. At this time, the subdomain The num accessed by the domain is a variable in the child domain, not the parent domain. It can be seen that there are certain rules for access. When using variables in JavaScript, the JavaScript interpreter first searches whether there is a definition of the variable in the current scope. If there is, this variable is used. If not, it goes to the parent domain to find the variable. , and so on, until the top-level scope is still not found, an exception "variable is not defined" will be thrown. The code is as follows:

<script type="text/javascript">
 (function (){
   var num=10;
   (function (){
     var num=20;
     (function(){
     alert(num);
      })();
   })();
  })();
</script>

After this code is executed, 20 will be printed. If "var num is =20" is removed, then the printed value is 10. Also remove "var num=10", then an undefined error will occur.

The following is an introduction to JS scope and block-level scope

Scope is always the most important thing in any programming language. Heavy because it controls the visibility and life cycle of variables and parameters. Speaking of which, first understand two concepts: block-level scope and function scope.

What is block-level scope?

Any set of statements in a pair of curly braces ({ and }) belongs to a block. All variables defined in it are invisible outside the code block. We It's called block scope.

The function scope is easy to understand (*^__^*). The parameters and variables defined in the function are not visible outside the function.

Most C-like languages ​​have block-level scope, but JS does not. Please see the following demo:

//C语言 
#include <stdio.h> 
void main() 
{ 
  int i=2; 
  i--; 
  if(i) 
  { 
    int j=3; 
  } 
  printf("%d/n",j); 
}

When you run this code, the error "use an undefined variable:j" will appear. As you can see, the C language has block-level scope because j is defined in the if statement block, so it is inaccessible outside the block.

How does JS behave? Let’s look at another demo:

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();

When you run this code, "3" pops up. It can be seen that outside the block, the variable i defined in the block is still is accessible. In other words, JS does not support block-level scope, it only supports function scope, and variables defined anywhere in a function are visible anywhere in the function.

So how do we make JS have block-level scope? Do you still remember that variables defined in a function will be destroyed when the function is called? Can we use this feature to simulate the block-level scope of JS? Take a look at this DEMO:

  function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();

这时候再次运行，会弹出"i"未定义的错误，哈哈，实现了吧~~~这里，我们把for语句块放到了一个闭包之中，然后调用这个函数，当函数调用完毕，变量i自动销毁，因此，我们在块外便无法访问了。

JS的闭包特性is the most important feature((*^__^*) 大家懂的)。在JS中，为了防止命名冲突，我们应该尽量避免使用全局变量和全局函数。那么，该如何避免呢？不错，正如上文demo所示，我们可以把要定义的所有内容放入到一个

（function (){ 
//内容 
})();

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用nginx + node如何部署https

在JavaScript中如何实现AOP

在mongoose中有关于更新对象的详细介绍

在JS函数中有关setTimeout详细介绍

使用jquery如何实现侧边栏左右伸缩效果

在Vue中如何实现数字输入框组件

The above is the detailed content of Detailed explanation of the difference between scope and block-level scope in Javascript. For more information, please follow other related articles on the PHP Chinese website!