Purpose:

JavaScript is becoming more and more magical…

Content:

JavaScript scope: A collection of accessible variables, objects, and functions.

1. Function scope

All variables declared in a function are always visible in the function body and can be used and reused throughout the function.

2. Block level scope

Invisible outside the code section of a variable declaration. Reference: ES6 lets and const.

Lexical scope

Refers to functions that run in the scope in which they are defined, rather than in the scope in which they are executed. JavaScript uses lexical scope, also known as static scope.

var name = 'Mr.Han';
function test(){
    alert(name);//undefined
    var name = 'Mrs.Han';
    alert(name);//'Mrs.Han'
}
test();
Copy the code
var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();/ / 1
Copy the code

4. Others:

4.1. Deconstructing assignment
4.1.1 Object deconstruction assignment

Get the specified property of an object quickly:

var person = {
    name: 'Ming'.age: 18.sex: 'male'
};
var {name, age, sex} = person;
// Name, age, passport are assigned the corresponding attributes:
console.log('name : ' + name + ', age : ' + age + ', sex : ' + sex);// Name: xiaoming, age: 18, sex: male
Copy the code

If we take an attribute that does not exist in the above object, undefined is still returned, but we can give it a default value, such as:

var person = {
    name: 'Ming',
    age: 18,
    sex: 'male'
};
var {name, age, sex, height="1.7"} = person;
console.log('name : ' + name + ', age : ' + age + ', sex : ' + sex+ ', height : '+ height); // Name: xiaoming, age: 18, sex: male, height: 1.7Copy the code

This adds a default value of 1.7 to the height property, which does not exist in the Person object.

4.1.2 Array deconstruction assignment
var [x, y, z] = [100.200.300];
// x, y, z are assigned to the corresponding elements of the array:
console.log('x : ' + x + ', y : ' + y + ', z : ' + z);//x : 100, y : 200, z : 300
Copy the code

Use […] for multiple variables. Enclosed.

4.2 the closure

A function that can read variables inside other functions (or a function defined inside a function).

4.2.1 Look at this example:
var name = "The Window";

var object = {
    name : "My Object".getNameFunc : function(){
        return function(){
            return this.name; }; }};console.log(object.getNameFunc()());//"The Window"
Copy the code
var name = "The Window";
var object = {
    name : "My Object".getNameFunc : function(){
        var that = this;
        return function(){
            returnthat.name; }; }};console.log(object.getNameFunc()());//"My Object"
Copy the code
4.2.2 Output numbers in sequence0-9:
for(var i = 0; i <10; i++){ setTimeout((a)= >{
        console.log(i),1000; })}Copy the code

Output: 10 10s.

Modify:

for(var i = 0; i <10; i++){ (function(arg){
         setTimeout((a)= >{
            console.log(arg),1000;
        })
    })(i);
}
Copy the code

Add a closure that passes I to the inner function as a function parameter.

for(var i = 0; i < 10; i++){ (function(){
        var temp = i;
         setTimeout(()=>{
            console.log(temp),1000;
        })
    })();
}
Copy the code

Or pass I as a local variable to the inner function in a new closure.

Conclusion:

The long march, more and more wonderful!