js variables and scope

 

 Primitive Set Type Values ​​and Reference Type Values

     5 basic data types: Undefined, Null, Boolean, Number and String, these 5 basic data types are accessed by value because the actual value stored in the variable can be manipulated.

Dynamic properties:

We create an object and store the value in person, then add properties to this value. This value persists until the object is destroyed.

var person = new Object();
person.name = "Nicholas";
alert(person.name);  //"Nicholas"

 But we cannot add properties to basic data types, such as:

var name = "Nicholas";
name.age = 27;
alert(name.age);    //undefined

 

Copy the variable:

 When you copy a primitive data type from one variable to another, a new object is created on the variable. Their values ​​do not affect each other. E.g:

var num1 = 5;
var num2 = num1;
num1 = 10;
alert(num1);    //10
alert(num2);    //5

 When copying a reference type from one variable to another, the value is actually a pointer, and both variables actually refer to the same object. E.g:

 

var obj1 = new Object();
var obj2 = obj1;
obj1.name = ”Nicholas“；
alert(obj2.name);    //"Nicholas"

 

Parameter passing:

When passing a value of a primitive data type to an argument, the passed value is copied to an internal variable (that is, the named argument, which is an element of the arguments object). E.g:

 

function addTen(num){
    num += 10;
    return num;
}
var count = 20;
var result = addTen(count);
alert(count);    //20
alert(result);    //30

 When passing a value of reference type to a parameter, the memory address of this value is copied to an internal variable. E.g:

 

 

function setName(obj){
    obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name);    //Nicjolas

 The above code creates an object, person and obj refer to the same object. Thus, when adding the name property to obj inside the function, the person outside will also change; the following example illustrates that the parameter is passed by value, not by reference:

 

 

function setName(obj){
    obj.name = "Nicholas";
    obj = new Object();
    obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name);    //Nicjolas

 The value of the parameter is modified inside the function, but the original reference remains unchanged. In fact, when obj is rewritten inside the function, this variable refers to a local object, which is destroyed immediately after the function is executed.

 

 

Type detection:

To test whether a variable is a primitive data type, the typeof operator is the best tool.

 

var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();

alert(typeof s);    //string
alert(typeof b);    //boolean
alert(typeof i);    //number
alert(typeof u);    //undefined
alert(typeof n);    //object
alert(typeof o);    //object

 When checking the value of reference type, ECMAScript provides the instanceof operator, the syntax is as follows:

 

 

alert(person instanceof Object);    //true
alert(colors instanceof Array);     //true

 Always returns true when detecting objects and false when detecting primitives.

 

 

Execution environment and scope:

The global execution environment is the outermost execution environment. In a web browser, the global execution environment is the window object.

 

var color = "blue";
function changeColor(){
    var anotherColor = "red";

    function swapColors(){
        var tempColor = anoterColor;
        anotherColor = color;
        color = tempColor;
        
        // Here you can access color, anotherColor and tempColor
    }
    // Here you can access color and anotherColor, but not tempColor
    swapColor();
}

// Only color can be accessed here
changeColor();

 Extend the scope chain:

 

try-catch statement catch block and with statement. Both statements add a variable object to the front of the scope chain.

 

function buildUrl(){
    var qs = "?debug=true";

    with(location){ //Receive the location object
        var url = href + qs;
    }

    return url;
}

try{
   ...
}catch(e){
   alert(e); //The thrown error object
}

 When the variable href is referenced in the with statement, it is actually location.href, (all properties and methods in the location object can be used).

 

No block scope:

example:

 

if (true) {
     var color = "red";
}

alert(color);    // red

 Variables in for loop:

 

 

for (var i = 0; i < 10; i++) {
   doSomething(i);
}

alert(i);    // 10

 The variable i created by the for loop still exists in the execution environment outside the loop even after the loop ends;

 

Variable declaration:

 

// variables declared with var
function add(num1, num2){
    var sum = num1 + num2;
    return sum;
}

var result = add(10, 20);
alert(result);    //30
alert(sum); //error will be thrown here

// variable without var declaration
function add(num1, num2){
    sum = num1 + num2;
    return sum;
}
var result = add(10, 20);
alert(result);    //30
alert(sum);    //30

 Declaring a variable with var will add it to the nearest scope, otherwise it will add it to the global scope.