The introduction

Js variables are quite different from variables in other languages. The loosely typed nature of a JS variable means that it is simply a name used to hold a particular value at a particular time. Since there is no definition of which data types a variable must hold, it can be changed during script execution.

Base data types and reference data types

A Js variable may contain values of two different data types:

• Basic data type: Simple data segment

Undefined , Null , Boolean , Number , String ,Symbol
Copy the code

Basic data types are accessed by value

• Reference data type: An object consisting of multiple values.

Object
Copy the code

Reference data types are accessed by reference

Dynamic properties

That sounds interesting

• For a value of a reference type, we can add attributes and methods to it, change and delete attributes and methods.
• However, we cannot add attributes to values of primitive types, although doing so will not cause any errors.

var person = new Object(a); person.name ='zs'
console.log(person.name); // zs

var name = 'zs';
name.age = 24;
console.log(name.age); // undefined
Copy the code

Passing parameters

All functions in JS are passed arguments by value. That is, copying a value from outside a function to an argument inside a function is the same as copying a value from one variable to another. A value of a primitive type is passed as a copy of a primitive variable, and a value of a reference type is passed as a copy of a reference type.

Note When passing a primitive type value to a parameter, the passed value is copied to a local variable (or, to use the JS concept, an element in the arguments object). When you pass a value of a reference type to a parameter, the value’s in-memory address is copied to a local variable, so changes to the local variable are reflected outside the function.

Many developers mistakenly believe that objects that are modified in a local scope are reflected in a global scope, which means that parameters are passed by reference

Now, let me do another example

function setName(obj) {
    obj.name = 'zs';
    obj = new Object(a); obj.name ='h'
}
var person = new Object(a); setName(person); person.name;// zs
Copy the code

This shows that the original reference remains unchanged even if the parameter values are changed inside the function. In fact, when you override obj inside a function, the variable references a local object. The local object is destroyed immediately after the function completes execution.

You can think of arguments to JS functions as local variables

Execution environment and scope

Execution environment is one of the most important concepts in JS. The execution environment defines other data that variables or functions have access to, determining their respective behavior. Each execution environment has a variable object associated with it, and all variables and functions defined in the environment are stored in this object.

The global execution environment is the most peripheral execution environment. In web browsers, 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.

Each function has its own execution environment. When the execution stream enters a function, the function’s environment is pushed onto an environment stack.

Scope chain: The variable object of the global execution environment is always the last object in the scope chain that guarantees ordered access to all variables and functions that the execution environment has access to

In addition, variables defined in a local scope can be used interchangeably with global variables in the local environment, as in the following example:

var color = 'blue'

function changeColor() {
    var anthor = 'red';

    function swapColors() {
        var tempColor = anthor;
        anthor = color;
        color = tempColor;
    }

    swapColors();
}
changeColor();
Copy the code

The inner environment can access all the outer environments through the scope chain, but the outer environment cannot access any variables and functions in the inner environment. The connections between these environments are linear and orderly. Each environment can search up the scope chain to query variable and function names; But no environment can enter another execution environment by searching down the scope chain

Function parameters are also treated as variables, so their access rules are the same as other variables in the execution environment

Lengthen the scope chain

Although there are only two types of execution environment

• global
• Local (function)

But there are other ways to extend the scope chain.

This is because some statements can temporarily add a variable object to the front of the scope chain, which is removed after code execution. This happens in two cases. Specifically, the scope chain is lengthened when the execution flow enters any of the following statements:

• The catch block of a try-catch statement
• With statement

Both statements add a variable object to the front of the scope chain. For the with statement, the specified object is added to the scope chain. For catch statements, a new variable object is created that contains the declaration of the error object that was thrown.

Both statements add a variable object to the front of the scope chain. For the with statement, the specified object is added to the scope chain. For catch statements, a new variable object is created that contains the declaration of the error object that was thrown.

There is no block-level scope

JavaScript’s lack of fast scope often causes difficulties in understanding it. In other C-like languages, blocks of code enclosed by curly braces have their own scope, thus allowing variables to be defined according to conditions. For example, the following code does not produce the desired result in javaScript:

if(true) {
    var color = 'blue';
}
console.log(color)
Copy the code

Here the variable color is defined in an if statement. In C, C+, color is destroyed after the if statement is executed. But in JS, variable declarations in if statements add variables to the current execution environment (in this case, the global environment). This is especially important when using for statements

for(var i = 0 ; i < 10 ; i ++) {
    console.log(i)
}
console.log(i); / / 10
Copy the code

For fast-scoped languages, variables defined by expressions that initialize variables in a for statement only exist in the context of a loop. In javaScript, the variable I created by the for statement remains in the execution environment outside of the for loop even after it has finished executing.

1. Declare variables

Variables declared using VAR are automatically added to the nearest environment. Within a function, the closest environment is the local environment of the function; In the with statement, the closest environment is the functional environment. If a variable is initialized without a VAR declaration, it is automatically added to the global environment.

2. Query the identifier

var color = 'blue';
function getColor() {
    return color;
}
console.log(getColor()); // 'blue'
Copy the code