js function execution mechanism

js function execution mechanism

        function fn(){

        var f = function qqq(){
        var f2 = ()=>{
           //this   arguments


Function in js:

  • function plus function name function
  • Function expression (function expression can also add function name after function inside, but it is meaningless)
  • Self-executing function, no function name, can only be executed once
       (function () {
            console.log(this, 1);
        ! function () {
            console.log(this, 2);
        ~ function () {
            console.log(this, 3);
  • ES6 arrow function

The parameters written in parentheses when the function is defined are formal parameters, and the parameters passed in when the function is executed are actual parameters. The formal parameters and actual parameters are in one-to-one correspondence. Arguments is an array of actual parameter collections (elements collection) return determines the return of the function The value interrupt function executes the execution body of the this function (in non-strict mode, formal parameters and arguments have a mapping relationship, but in strict mode there is no)

Function stored procedure

The function in js belongs to the reference data type data. Therefore, the function storage is: open a hexadecimal pair of memory, and store the code in the function body as a string

Function execution

Function execution, open a private scope (stack memory), take out the code string of the memory for execution, first assign the formal parameters, promote the variable, and then execute the code from top to bottom (execution context), the function is executed, the variable Destroy, scope destruction.

Variable promotion

Before the code is executed, js will declare the var and function in the code in advance. The var is only declared but not defined, and the function with function is defined again. Variable promotion, only promotes the content on the left side of the equal sign. Variable promotion will be carried out regardless of whether the condition is true or not. The function in the conditional sentence and the loop sentence is only declared and not defined


The scope is the area that works when the code is executed, and the scope is a piece of stack memory (stack memory is used to store value type data, and it also provides a code running environment)

  • Global scope

    Once the page is opened, it will form a global scope. A page has only one global scope, that is, window and execution context. Variables declared in the global scope are called global variables

  • Private scope

    When the function is executed, a private scope is formed. The variables declared in the private scope are called private variables; the formal parameters are also private variables

  • Block scope

    The part enclosed by the curly braces of the judgment sentence loop sentence is added in es6. Only the variables declared by let and const can recognize the block-level scope. For var, there is no such thing as a block-level scope.

Upper-level scope: The private scope formed during the execution of the function generally has an upper-level scope. Who is the upper-level scope of the private scope? It has nothing to do with where the function is executed. It is only defined by the function in that scope. There are relationships

Scope chain

The variable in the private scope may not be the private variable of the private scope. At this time, the value corresponding to the variable needs to be searched in the upper scope. If it is still not a private variable in the upper scope, then it will be searched to the upper level until it is found. The window (global) position, if there is still no position, an error will be reported; the above mechanism for finding variables is called the scope chain

The difference between var let const

  • var can be declared repeatedly let and const cannot
  • var exists variable promotion let and const does not
  • Variable declared by var will add a corresponding attribute under window; let and const will not
  • var does not recognize block-level scope, let and const can be recognized


Closures are firstly a non-destroyed scope to protect variables. Use closures to store values can achieve modular development. Closures cannot be used for multiple purposes: multiple uses will cause memory leaks; purpose: when modularization is developed, it is used to avoid naming conflicts. Closure

        var sum = function(){
            var a = 200;
            return function(){

Destruction of heap and stack memory

Destruction of heap memory

  • Google Chrome: Clear regularly, and the entire text will be destroyed every once in a while to destroy the unused addresses in js
  • Firefox browser: clear the count, determine whether this should be destroyed according to the number of references to the current address

Destruction of stack memory

  • Destruction of the global scope: only when the page is closed will it be destroyed
  • Destruction of private scope: As long as the return value of the function is a reference data type, this scope will not be destroyed;

Higher order function

//var f = a=>b=>c=>a+b+c;
var f = a=>{
    return b=>{
        return c=>{
            return a+b+c;

This in the function

this is the execution body of the function

  • There is no this and arguments in the arrow function; it is the two that are treated as ordinary variables; the this in the arrow function points to the this in the upper scope, and the arguments are the same
  • This in the event binding is the currently bound element
  • This in the self-executing function is window
  • This in the timer is also window

Who is the point of this can be determined by looking at the point, who is in front of the function execution point, who is this, and no point is the window