0. Execution context and execution context stack

0.1 variable promotion and function promotion

• Variable promotion: this variable can be accessed before the variable definition statement
• Function promotion: the function is executed before the function definition statement
• First the variable is promoted, then the function is promoted
  

0.2 how to understand variable promotion and function promotion?

• Execution context: an object automatically created by the js engine, which contains all variable attributes in the corresponding scope
• Number of execution contexts: n (function called several times) + 1

1. Global execution context
   
2. Function execution context
   

0.3 execution context stack: used to manage multiple execution contexts generated

• Classification:
  • Global: window
  • Functions: transparent to programmers
• life cycle
  • Global: generated before the global code is ready to execute, and dies when the page refreshes / closes the page
  • Function: occurs when a function is called, and dies when the function is executed
• Which attributes are included:
  • overall situation:
    • Global variables defined with var = = > undefined
    • Function declared with function = = > function
    • this ===>window
  • function
    • Local variables defined with var = = > undefined
    • Function declared with function = = > function
    • This = = = > the object that calls the function. If it is not specified, it is window
    • Formal parameter variable = = > corresponding argument value
    • Arguments = = > pseudo array of argument list
• Perform the process of Context Creation and initialization
  • overall situation:
    • Create a global execution context (window) before global code execution
    • Collect some global variables and initialize
    • Set these variables to the properties of window
  • Function:
    • When calling a function, create a function execution context before executing the function body
    • Collect some local variables and initialize
    • Set these variables as properties of the execution context
      

0.3.1 execution context stack interview questions:

0.3.2 interview questions for variable promotion and function promotion:

Execute variable promotion first, and then function promotion

1, Scope and scope chain

• understand:

  • Scope: a code area that is determined during coding and will not change

  • Number of scopes: n (several functions defined) + 1
    

• Scope chain: an inside out structure formed by multiple nested scopes, which is used to find variables

• Classification:

  • overall situation
  • function
  • js has no block scope (before ES6)

• effect

  • Scope: isolate variables. Variables with the same name can be defined in different scopes without conflict
  • Scope chain: finding variables
    
    

• Distinguish between scope and execution context

  • Scope: static. It is determined during coding (not at runtime). Once it is determined, it will not change
  • Execution context: dynamic. It is created dynamically when code is executed and disappears when execution ends
  • Contact: the execution context is in the corresponding scope
    
    
    
    

2, Closure

2.1 understanding of closure:

• A closure occurs when a nested inner function references a variable of an outer function
• Through the chrome tool, we know that the essence of closure is an object in the internal function, which contains the referenced variable attributes

function fn1() {
				var a = 2
				var b = 'zep'
				return function fn2() {
					console.log(a)
				}
			}
			var f = fn1()
			f()

2.2 function of closure:

• Extend the life cycle of local variables

• Let the external function operate on the internal local variables

• Write a closure program

  function fn1() {
    var a = 2;
    function fn2() {
      a++;
      console.log(a);
    }
    return fn2;
  }
  var f = fn1();
  f();
  f();

2.3 common closures

// Common closures:
			/* // 1. Take a function as the return value of another function
			function fn1() {
				var a = 2
				function fn2() {
					a++
					console.log(a)
				}
				return fn2
			}
			
			var f = fn1()
			f()  // 3
			f()  // 4
			
			// How many closure functions (i.e. fn2()) are created?
			// Look at how many times the external function is executed, that is, how many times fn1() is executed */
			
			// 2. Pass a function as an argument to another function call
			function showDelay(msg, time) {
				setTimeout(function() {
					alert(msg)
				}, time)
			}
			showDelay('zep', 2000)

2.4 life cycle of closure:

2.5 closure application:

• Modularity: encapsulate some data and functions that manipulate data, and expose some behaviors to the outside
  Mode 1:
  
  Mode 2:
  
  

• Loop traversal plus listening
  
  
  

// Requirement: click a button and prompt "click the nth button"
			/* var btns = document.getElementsByTagName('button')
			// Traversal plus listening
			for(var i = 0, length = btns.length; i < length; i++) {
				var btn = btns[i]
				// Save the subscript corresponding to btn to btn
				btn.index = i
				btn.onclick = function() {
					alert('The '+ (this.index + 1) +' th ')
				}
			} */
			
			var btns = document.getElementsByTagName('button')
			// Traversal plus listening
			for(var i = 0, length = btns.length; i < length; i++) {
				// Using closures
				(function(i) {
					var btn = btns[i]
					btn.onclick = function() {
						alert('The first' + (i + 1) + 'individual')
					}
				})(i)
			}

• The JS framework (jQuery) makes extensive use of closures

2.6 disadvantages of closures:

• Variables may take too long to occupy memory
• May lead to memory leakage (the released memory is not released in time)
• solve:
  • Timely release: f = null// Make internal function objects garbage objects

How to determine whether closures exist?

The following three points need to be met:

1. Function nesting exists
2. The variable defined in the parent function is referenced (used) in the child function
3. The parent function was called and executed

For example, in the following code,

Because closures can keep n variables in memory, and a variable points to the return value of fun(0) (the return value is also a function, and there is a closure in the function. The closure is an object, and the object contains the referenced variable attribute, i.e. n variables), the return value will not be automatically destroyed as a garbage variable, There is a problem: closures can lead to memory leaks

2.7 closed surface test questions

//Code snippet 1
			var name = "The Window";
			var object = {
				name: "My Object",
				getNameFunc: function() {
					return function() {
						return this.name;
					};
				}
			};
			console.log(object.getNameFunc()()); //?  the window


			//Code snippet 2
			var name2 = "The Window";
			var object2 = {
				name2: "My Object",
				getNameFunc: function() {
					var that = this;
					return function() {
						return that.name2;
					};
				}
			};
			console.log(object2.getNameFunc()()); //?  my object

3, Memory overflow and memory leak

1. out of memory

• An error in the operation of a program
• When the memory needed by the program exceeds the remaining memory, a memory overflow error is thrown
  

1. Memory leak

• The occupied memory was not released in time
• Excessive accumulation of memory leaks can easily lead to memory overflow
• Common memory leaks:
  • Unexpected global variable
  • Timers or callback functions that are not cleaned up in time
  • closure