The closure javascript scope chain

Execution environment with a scope

Execution Environment

Variable object has an associated execution environment, properties and methods defined in the environment variables and functions are the object.

1. Global execution environment --window objects (web browser)
2. Topical (function) execution environment

Global variable object is always present, while the local variable objects exist only during the execution of the function.

Scope

Divided into global and local scope
ES6 with block-level scope.

The scope chain

When performing in an environment, it will create a variable object scope chain, the scope chain stored in the internal properties of the function [[scope]], the assurance of variables and functions have access to the execution environment orderly access.

1. The front end of the scope chain: the current execution environment of the variable object -> variable object containing the environment -> next layer comprises variable objects environment ......-> global environment objects

2. When the identifier resolution: a level search scope chain from the front, back back, not found on the error.

The scope chain is essentially a list of pointers, a pointer to the variable object.

Note:
function environment, active objects as a variable object, the object initially contains only arguments
to extend the scope chain: catch and with statement

Closure

Closure is another function variable domain can access the role of [function].

function animals(name){
    return function(){
        console.log(name);
    };
}
var a = animals("cat");
a();    //cat

Inside the scope chain anonymous function contains its own, external functions and global variables variable objects objects, even if the external function runs end, the scope chain to destroy an external function, external function variable object is still referenced by an anonymous function scope chain, Therefore, the object has an external function variables in memory, when the anonymous function destroyed, will destroy its scope chain variable object references.

Closure some problems

1. Closures take up memory
2. Closures save the entire variable object, use a closure is a reference to a variable are the same
3. this closure is generally directed window
4. Memory leak: If you saved the HTML closure element, then this element will not be destroyed

Imitation of block-level scope

function test(){
    for(var i=0; i< 10; i++){
        console.log(i);
    }
    console.log(i); //在这里还可以访问到 i
}

Block-level syntax example imitation scopes:

function test(){
    (function(){
        /*块级作用域*/
        for(var i; ...){...}
    })();
    console.log(i); //报错~
}

Add commonly used functions in the global scope, to avoid excessive global scope variables and functions.

Private variables

Used in the constructor, create private variables, private functions and privileges for the custom type method

//
function Person(name){  //name和age是私有变量
    var age = 10;
    function myAge(){  //私有函数
        return age;
    }
    this.getAge = function(){
        return myAge(); //用特权方法访问私有函数和属性
    }
    this.getName = function(){  //特权方法
        return name;
    };
    this.setName = function(newName){   
        name = newName;
    };
}

// private static variable

(function(){
    var name = "";
    Person = function(value){
        name = value;
    };
    Person.prototype.getName = function(){
        return name;
    };
    Person.prototype.setName = function(value){
        name = value;
    };
})();
var p1 = new Person("Sam");
console.log(p1.getName());      //Sam
var p2 = new Person("Ben");
console.log(p2.getName());      //Ben
console.log(p1.getName());      //Ben

Module mode

var add = (function(){
    var count = 0;
    return {    //返回一个对象，定义公共接口访问私有变量和函数
        increase: function(){  return count += 1; },
        decrease: function(){   return count -= 1; },
        value: function(){  return count; }
    };
})();
add.increase(); //
console.log(add.value());