[Effective JavaScript notes] 11th: Mastering closures

Understanding closure Three basic Facts The first fact: JS allows you to refer to variables defined outside of the current function.

function Makesandwich () {

var magicingredient= "Peanut butter";

function make (filling) {

Return magicingredient+ ' and ' +filling;

}

return make (' jelly ');

}

Makesandwich ();//"Peanut Butter and Jelly"

The figure directly indicates the following

The second fact: even if an external function has returned, the current function can still refer to the variable defined in the external function.

function Sandwichmaker () {

var magicingredient= "Peanut butter";

function make (filling) {

Return magicingredient+ ' and ' +filling;

}

return make;

}

var f=sandwichmaker ();

F ("jelly");//"Peanut Butter and Jelly"

F ("bananas");//"Peanut butter and Bananas"

F ("marshmallows");//"Peanut butter and marshmallows"

or the identity

principle: The function value of JS contains more information than the code needed to execute when invoking them. and the JS function values are also stored internally that they may reference variables defined in their enclosing scopes. Functions that track variables within the scope they cover are called closures. The Make function is a closed packet. Its code references two external variables: magicingredient and filling. Whenever make is called, its code can refer to both variables, because the closure stores the two variables.

A function can refer to any variable within its scope, including parameters and external function variables.

function Sandwichmaker (magicingredient) {

function make (filling) {

Return magicingredient+ "and" +filling;

}

return make;

}

var hamand=sandwichmaker ("Ham");

Hamand ("cheese");//"Ham and Cheese"

Hamand ("mustard");//"Ham and Mustard"

var turkeyand=sandwichmaker ("Trukey");

Turkeyand ("Swiss");//"Trukey and Swiss"

Turkeyand ("provolone");//"Trukey and Provolone"

Closure is one of the most elegant and expressive features of JS, and it is also the core of many idiomatic methods. JS also provides a more convenient literal syntax for building closures-function expressions.

function Sandwichmaker (magicingredient) {

return function (filling) {

Return magicingredient+ "and" +filling;

}

}

Note that the function expression is anonymous. Because only a new value needs to be generated and not used locally, it is not necessary to name the function.

Third fact: Closures can update the values of external variables.

In fact, closures store references to external variables, not copies of their values. So any closures with access to these external variables can be updated.

function box () {

var val=undefined;

return {

Set:function (newval) {val=newval},

Get:function () {return val},

Type:function () {return typeof val}

}

}

var b=box ();

B.type ();//"Undefined"

B.set (98.6);

B.get ();//98.6

B.type ();//"Number"

In this example, an object containing three closures is generated. These three closures are the Set,get and type properties. They share access to the Val variable.

Tips

• A function can reference a variable defined in its outer scope
• Closures have a longer life cycle than the functions that create them
• Decorations Store references to their external variables internally, and can read and write these variables

Postscript

This part, it is said here is very clear, if you want to go deeper to understand, you can see the high 3 above on the closure of the explanation.

Inside the scope chain, the execution environment, variable objects, are described in detail.

[Effective JavaScript notes] 11th: Mastering closures