Home >Web Front-end >JS Tutorial >Sample code sharing for JS closure usage

Sample code sharing for JS closure usage

黄舟Original: 2017-03-27 14:37:311678browse

This article mainly introduces the usage of JS closures, and analyzes the principles, execution steps and related operation techniques of javascript closures in combination with specific examples. Friends in need can refer to it. The following

examples in this article describe the usage of JS closures. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
//      第一，函数作为返回值
      function fn(){
        var max = 10;
        return function bar(x){
          if(x > max) {
            console.log(x);
          }
        };
      }
      var f1 = fn();
      f1(15);
    </script>
    <script type="text/javascript">
//      第二，函数作为参数被传递
      var max = 10;
      fn = function(x){
        if(x > max){
          console.log(x);//15
        }
      };
      (function(f){
        var max = 100;
        f(15);
      })(fn);
    </script>
    <script>
      function fn(){
        var max = 10;
        return function bar(x){
          if(if > max){
            console.log(x);
          }
        };
      }
      var f1 = fn();
        max = 100;
      f1(15);
    </script>
  </body>
</html>

The first step is to generate the global context environment before the code is executed, and to perform operations on the variables during execution. Assignment. The global context is active at this time.

Global context environment: max is undefined

The second step, when executing the var f1 = fn(); code, call fn(), resulting in fn() execution The context is pushed onto the stack and set to the active state.

fn() context: max is 10

The third step, after executing var f1 = fn();, the fn() call is completed. It stands to reason that the execution context of fn() should be destroyed, but this cannot be done here.

Note, here comes the important point: because when fn() is executed, a function is returned. The special thing about functions is that they can create an independent scope.

Coincidentally, in the returned function body, there is also a free variable max that refers to max in the context of fn() in the fn scope.

Therefore, this max cannot be destroyed. After it is destroyed, the max in the bar function cannot find the value. Therefore, the fn() context here cannot be destroyed and still exists in the execution context stack.

When execution reaches max = 100;, the global context will become active, but the fn() context will still be in the execution context stack.

In addition, after max = 100; is executed, max in the global context is assigned a value of 100.

Global context: max is 100 fn() context: max is 10

The fourth step, execute to f1(15);, execute f1(15 ), that is, execute bar(15), create the bar(15) context, and set it to the active state.

When executing bar(15), max is a free variable. You need to search in the scope where the bar function was created, and the value of max is found to be 10.

The key point here is that the bar function is created when fn() is executed. The execution of fn() has ended long ago, but the execution context of fn() still exists on the stack, so when bar(15), max can be found. If the fn() context is destroyed, then max cannot be found.

Using closures will increase content overhead, it’s obvious now!

The fifth step, after executing f1(15); is the destruction process of the context environment, which will not be described here.

Closures are inseparable from scope and context. It’s really “it’s not easy to love you”!

In addition, closures have many applications in jQuery, whether you want to learn about a classic framework/class library, or If you want to develop a plug-in or class library yourself, you must know basic theories such as closures and prototypes. Otherwise, when bugs appear, you won’t know why, because these bugs may be completely outside the scope of your knowledge.

The above is the detailed content of Sample code sharing for JS closure usage. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Angularjs+bootstrap+table multi-select (select all) code example that supports single-click row selection to implement editing and deletion functionsNext article：Angularjs+bootstrap+table multi-select (select all) code example that supports single-click row selection to implement editing and deletion functions

See more

Sample code sharing for JS closure usage

Related articles