This is the sixth day of my participation in the August Text Challenge.More challenges in August

Execution context and execution context stack

Variable promotion and function promotion

  • Variable promotion: Access to the variable (undefined) before the variable definition statement.
  • Function promotion: Executes the function before the function definition statement
  • There’s variable promotion, then there’s function promotion
/* Variable promotion and function promotion */
var a = 3
function fn () {
  console.log(a)
  var a = 4
}
fn()     //undefined

console.log(b) //undefined variable promoted
fn2() // callable function promotion
// fn3() // cannot be variable promoted

var b = 3
function fn2() {
  console.log('fn2()')}var fn3 = function () {
  console.log('fn3()')}Copy the code

understand

  • Execution context: An object automatically created by the JS engine that contains all variable properties in the corresponding scope
  • Execution context stack: Used to manage the multiple execution contexts generated

Classification:

  • Global: Windows
  • Functions: Transparent to the programmer

The life cycle

  • Global: Generated before global code is ready to execute and dies when the page is refreshed/closed
  • Function: generated when a function is called, dead when the function is finished

Perform context creation and initialization:

Global execution context:

  • Identify the window as a global execution context before executing global code
  • Preprocessing global data
    • The global variable defined by var ==>undefined is added as the property of window
    • Function declared global function ==> assignment (fun), added as window method
    • This = = > assignment (Windows)
  • Start executing global code

Function execution context:

  • Create the corresponding function execution context object (virtual, on the stack) before calling the function and preparing to execute the function body
  • Local data is preprocessed
    • The local variable defined by var ==>undefined is added as an attribute of the execution context
    • Function declared function ==> assignment (function), added as the method of the execution context
    • This ==> assigns (the object calling the function), or window if not specified
    • Parameter ==> Assignment (argument)==> added as an attribute of the execution context
    • Arguments ==> Assignment (pseudo-array of argument lists), added as a property of the execution context
  • Start executing the function body code
console.log('gb: '+ i)
var i = 1
foo(1)
function foo(i) {
  if (i == 4) {
    return
  }
  console.log('fb:' + i)
  foo(i + 1) // Recursive call: calls itself from within a function
  console.log('fe:' + i)
}
console.log('ge: ' + i)
/* gb: undefined fb: 1 fb: 2 fb: 3 fe: 3 fe: 2 fe: 1 ge: 1 5 * /
-->

Copy the code

Scope and scope chain

To understand:

  • Scope: an area of code that is defined at coding time and does not change
  • Scope chain: An inside-out structure of nested scopes used to find variables

Classification:

  • global
  • function
  • Js has no block scope (prior to ES6)

role

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

Distinguish between scope and execution context

1. The difference between 1

  • Outside of global scope, each function creates its own scope, which is defined when the function is defined. Not when the function is called
  • The global execution context is created after the global scope is determined and immediately before the JS code executes
  • A function execution context is created when a function is called and before the function body code executes

2. The difference between 2

  • The scope is static, existing as long as the function is defined and does not change
  • The execution context is dynamic, created when a function is called and released automatically when the function call ends

3. Contact

  • The execution context (object) is subordinate to its scope
  • Global context ==> Global scope
  • Function context ==> Corresponding function usage field
var x = 10;
function fn() {
  console.log(x);
}
function show(f) {
  var x = 20;
  f();
}
show(fn);  / / 10
Copy the code

closure

To understand:

  • Closures occur when nested inner functions reference variables of external functions
  • Using chrome tools, closures are essentially an object in an internal function that contains referenced variable properties

Function:

  1. Use variables inside a function that live in memory after the function is executed (extends the life of local variables)

  2. Make it possible to manipulate (read and write) data (variables/functions) from outside the function into the function itself

Question:

  1. Do local variables declared inside the function still exist after the function is executed? In general, it does not exist, only variables that exist in a closure can exist

  2. Can local variables inside a function be accessed directly from outside the function? No, but we can let the outside manipulate it through closures

Write a closure

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

Closure application:

  • Modularity: Encapsulate some data and the functions that manipulate it, exposing some behavior
  • Loop through plus listen
  • The JS framework (jQuery) makes extensive use of closures

Disadvantages:

  • Variables may occupy too much memory
  • Memory leaks may occur
  • Solution:
    • F = null; // make the internal function object junk
// Code snippet 1
var name = "The Window";
var object = {
  name : "My Object".getNameFunc : function(){
    return function(){
      return this.name; }; }}; alert(object.getNameFunc()());//the window


// Code snippet 2
var name2 = "The Window";
var object2 = {
  name2 : "My Object".getNameFunc : function(){
    var that = this;
    return function(){
      returnthat.name2; }; }}; alert(object2.getNameFunc()());//my object
Copy the code

Memory overflow and memory leak

1. Memory overflow

  • A program execution error
  • An out-of-memory error is thrown when the program runs on more memory than is available
  1. Memory leaks
  • The occupied memory was not released in time. Procedure
  • If memory leaks accumulate too much, they tend to overflow
  • Common memory leaks:
    • Unexpected global variables
    • No timer or callback function to clean up in time
    • closure

The last

This article serves as my study summary, at the same time shares to everybody because the personal technology is limited, if has found the mistake or has the question place, welcome to point out or gives advice! Thank you very much!