Closures and this

One. Closures

The first to understand closures is to define a function inside a function that can be invoked outside the environment. The idea now for closures is to use functions to hold objects in scope.

Understanding closures begins with understanding the execution context, the variable object, the active object, and the scope chain. Because the execution context is destroyed after the function executes, the variable disappears at the same time, but for some special scenarios, it is necessary to still have access to the variables within the function after the function is executed. The JS language functions as a "class citizen", can be passed as a parameter, and each function has its scope chain, and if an intrinsic function is returned as a variable, it is returned with its scope chain. Because the scope chain of an intrinsic function contains variables for external functions, function declarations and parameters, and so on, the variables are not destroyed even if the external functions are executed, because they are still referenced by the scope chain of the inner function. As an example:

var scope = ' global scope '; function foo () {    var scope = ' local scope ';    return function bar () {Console.log (scope);    }} Foo () ();

The execution result is ' local scope '. Since the returned bar function is called, it is looked up from its own scope chain, and no more is looked up until the scope object is found, and the output ends.

Two. This

If you add a sentence to the above code, output this in the returned function.

var scope = ' global scope '; function foo () {    var scope = ' local scope ';    return function bar () {Console.log (scope);        Console.log (this);}    } Foo () ();

The result is ' local scope ', ' window '. This refers to the global object, which is the window in the browser. The understanding of this is:

1) It is determined at the time of parsing the function, which is a property of the execution context, which does not change during the run.

function foo () {    function bar () {      ...    }    this = bar; Will error}

2) This is determined based on the object or expression of the calling function.

function foo () {   console.log (this);   } Foo ();

The object calling the function is global, which is the window

var foo = {   x:10,   bar:function () {                        console.log (this.x);         }   } var zoo = {    X:20}zoo.bar = Foo.bar;zoo.bar (); Foo.bar ();

Output 20, 10, the object calling the function is Zoo and Foo, respectively.

x = ' Global x '; var foo = {   x: ' Local x ',   bar:function () {                console.log (this.x);      }   } Foo.bar ();(foo.bar) ();(foo.bar = Foo.bar) ();

() expression does not change the call value of the function itself, so returns ' Local X ', the assignment expression changes the call value of the function itself, and therefore returns ' Global X '.

The This value can be artificially intervened through a function:

3) Call and apply functions

x = ' Global x '; var foo = {   x: ' Local x ',   bar:function (n) {                console.log (this.x);         Console.log (n);     }   } Foo.bar.call ({x: ' Call x '}, ' call '); Foo.bar.apply ({x: ' Apply X '}, [' Apply ']);

The value of this is changed by the first parameter of call and apply.

Closures and this