Reading Notes 4: Variables, Scope and Memory Problems


Basic Types and Reference Type Values ​​

(1) Concepts

Basic Type Values Refers to simple data segments, and The value of a reference type refers to an object that may consist of multiple values. The value of the reference type is the object stored in memory. JavaScript does not allow direct manipulation of an object's memory space, it actually operates on a reference to the object, not the actual object. The value of the reference type is accessed by reference. The two types of values ​​worth noting in memory are different. The basic type value occupies a fixed amount of space in memory and is stored in the stack memory; when the value of the type is referenced, the object is saved in the heap memory. Included reference type The value variable actually contains not the object itself, but a pointer to the object, which can also be understood as the address of the object in the heap memory, and this variable is stored in the stack memory. 这里写图片描述 因此,复制引用类型的值时,实际上复制的是指向储存在堆中的对象的指针。它们会指向同一个对象,改变其中一个变量会影响到另一个变量。

(2) The function arguments for all functions in

ECMAScript are pass by value .

About by value and by reference:

  • by value (call by value): The formal parameter of the function is a copy of the actual parameter passed when called. Modifying the value of a formal parameter does not affect the actual argument and is the most common evaluation strategy.
  • call by reference When a parameter's formal parameter receives an implicit reference to an argument, it is no longer a copy. This means that if the value of the function parameter is modified, the actual parameter will also be modified. At the same time both point to the same value.
  • Transfer by value Because each time you need to clone a copy, for some complex types, the performance is lower; passing by reference makes the tracking of function calls more difficult, sometimes causing some subtle bugs.

JS, what are the characteristics of function parameters passed by value?

  • When passing a value of a primitive type, the passed value is copied to a local variable (ie named parameter, or an element of the arguments object);
  • pass reference type When the value is used, the value (pointer) of this value in memory is copied to a local variable, so the change of this local variable is reflected outside the function.

This part of the example can be seen in the Great God blog, which mentions , by sharing the call by sharingThoughts

Example 1: Passing the reference type value to the function parameter

var foo = {name:'foo'};
function test(obj){ = 'test';  @@//First step operationobj = {name:'bar'};  //Second step operation};
Console.log(foo);// Result: Object {name: "test"}

First, here fooSave the pointer of the object, not the object itself, press The value passed to the parameter obj is also this pointer, called object1;   The first step, objThe object pointed to is still object 1, and the name ​​attribute of object 1 is modified at this time;   The second step is to assign a new value to obj, pointing to the new object, called 对象2; equivalent to executing obj = new Object(); obj = {name:'bar'};here objGet a brand new object.   In the global environment, the variable foo has no reassignment and always points to object 1;   So changing the value of the function internal variable obj does not affect the original value of the parameter in the external environment foo这里写图片描述

(3) Detection type

  • using instanceof Whether an instance belongs to a certain type;
  • instanceof can be used in an inheritance relationship to determine whether an instance belongs to its parent type. In a multi-level inheritance relationship, the instanceof operator also works;
  • All reference type values ​​are instances of Object, when detecting a reference type value and Object constructor, instanceof Always return true

to understand the instanceof operator, which will involve the prototype inheritance mechanism, which will be mentioned in subsequent chapters. There are some examples in this blog.

Execution Environment and Scope

(1) Concept Clearance

  • Execution Environment: Defines other data that variables or functions have access to, determines their respective behaviors, and sometimes It is called the execution context. After all the code in an execution environment has been executed, the environment is destroyed and all variables and functions stored in it are destroyed. The execution environment has Global Execution Environment and function execution environment
  • 变量对象: All variables and functions defined in the environment are stored in this object.
  • 主人环境: The hosting environment is generally created and maintained by the shell and can serve a variety of scripting languages ​​such as JavaScript. The host environment typically creates a set of public object systems that are open to all scripting languages ​​and allow them to be freely accessed. At the same time, the hosting environment also provides a public interface for loading different scripting language engines. This way we can load different scripting engines in the same hosting environment and allow them to share host objects.
  • Global Execution Environment: The global execution environment is the most peripheral execution environment. In a web browser, the global execution environment is considered a window object, so all global variables and functions are created as properties and methods of the window object. When the code is loaded into the browser, the global execution environment is created; when we close the web page or browser, the global execution environment is destroyed.
  • Scope chain: The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has access to. When the code is executed in an environment, a scope chain of the variable object is created. The front end of the scope chain is always the variable object of the environment in which the currently executing code resides. The internal environment can access all external environments through the scope chain, but the external environment cannot access any variables and functions in the internal environment.
  • 活对象: This concept is for functions. When a function object is called, an active object is created. First, each formal parameter and argument of the function is added as the property and value of the active object; the declared variable and function are displayed in the function body. Also added as an attribute of the activity. This active object acts as the front end of the scope chain of the function execution environment, and links the scope of the [[scope]] attribute of this function object to the back end of the function execution environment scope chain.
  • 功能对象: When a function is defined, a [[scope]] property of this function object is created, and this [[scope]] The attribute points to the scope chain that defines it.

(2) Extend the scope chain

  • Temporarily add a variable object at the front end of the scope chain, which will be removed after the code is executed.
  • try-catch statement catchmodule: When an error occurs in the try block, the execution will jump to the catch| The || statement, then the exception object is pushed into a mutable object and placed in the scope of the scope; inside the 语句,然后异常对象推入一个可变对象并置于作用域的头部;在 catch code block, all local variables of the function will be placed in the second scope In the chain object.
  • withStatement with Statement is a quick application of objects to avoid writing duplicate code. The width statement looks more efficient and actually has performance issues that are generally not recommended.

(3)Block-level scope

Block-level scope and function scopeBlock-level scope: Variables are reclaimed immediately after leaving the defined block-level code;   Function scope: Variables are visible everywhere in defined environments and nested subfunctions;

ES5 and previous versions JavaScript have no block-level scope, only two: functions Scope and global scope. Variables declared with var are automatically added to the closest environment. Variables declared with constES6 can only be accessed in block-level scopes until block-level scope is defined in let / const.

letCharacteristics of the declaration:

  • let The declared variable is valid only in the code block where the let command is located;
  • does not have variable promotion, the variable must be declared After use, otherwise an error;
  • As long as the block-level scope has a let command, the variable it declares "binds" this area and is no longer affected by external influences. In the code block, before the variable is declared with the let command, the variable is not available, called "temporal dead zone" (TDZ);
  • "Temporary dead zone", the typeof operator checks this variable before the let command declares a variable;
  • let does not allow duplicate declarations in the same scope. variable.

The above is the study notes of the fourth chapter of "Javascript Advanced Programming".