From a52bf3a3ed120d6217bc571b1b4f4531bd31a15c Mon Sep 17 00:00:00 2001 From: DarkSun Date: Tue, 16 Feb 2021 05:04:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=89=E9=A2=98[tech]:=2020210215=20A=20prac?= =?UTF-8?q?tical=20guide=20to=20JavaScript=20closures?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit sources/tech/20210215 A practical guide to JavaScript closures.md --- ... practical guide to JavaScript closures.md | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 sources/tech/20210215 A practical guide to JavaScript closures.md diff --git a/sources/tech/20210215 A practical guide to JavaScript closures.md b/sources/tech/20210215 A practical guide to JavaScript closures.md new file mode 100644 index 0000000000..46f5d19c0f --- /dev/null +++ b/sources/tech/20210215 A practical guide to JavaScript closures.md @@ -0,0 +1,144 @@ +[#]: collector: (lujun9972) +[#]: translator: ( ) +[#]: reviewer: ( ) +[#]: publisher: ( ) +[#]: url: ( ) +[#]: subject: (A practical guide to JavaScript closures) +[#]: via: (https://opensource.com/article/21/2/javascript-closures) +[#]: author: (Nimisha Mukherjee https://opensource.com/users/nimisha) + +A practical guide to JavaScript closures +====== +Get a better understanding of how JavaScript code works and executes by +diving into one of the advanced concept: closures. +![Woman programming][1] + +In [_4 reasons why JavaScript is so popular_][2], I touched on a few advanced JavaScript concepts. In this article, I will dive into one of them: closures. + +According to [Mozilla Developer Network][3] (MDN), "A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)." Simplified, this means that a function inside another function can access the variables from the outer (parent) function. + +To better understand closures, take a look at scopes and their execution context. + +Here is a simple code snippet: + + +``` +var hello = "Hello"; + +function sayHelloWorld() { +var world = "World"; +        function wish() { +                var year = "2021"; +                console.log(hello + " " + world + " "+ year); +} +wish(); +} +sayHelloWorld(); +``` + +Here's the execution context for this code:  + +![Execution context for JS code][4] + +(Nimisha Mukherjee, [CC BY-SA 4.0][5]) + +Closures are created every time a function is created (at function-creation time). Every closure has three scopes: + + * Local scope (own scope) + * Outer functions scope + * Global scope + + + +I'll modify the above code slightly to demonstrate closure: + + +``` +var hello = "Hello"; + +var sayHelloWorld = function() { +var world = "World"; +        function wish() { +                var year = "2021"; +                console.log(hello + " " + world + " "+ year); +} +return wish; +} +var callFunc = sayHelloWorld(); +callFunc(); +``` + +The inner function `wish()` is returned from the outer function before it's executed. This happens because functions in JavaScript form **closures**. + + * `callFunc` holds a reference to the function `wish` when `sayHelloWorld` runs + * `wish` maintains a reference to its surrounding (lexical) environment where the variable `world` exists. + + + +### Private variables and methods + +Natively, JavaScript does not support the creation of private variables and methods. A common and practical use of closure is to emulate private variables and methods and allow data privacy. Methods defined within the closure scope are privileged. + +This code snippet captures how closures are commonly written and used in JavaScript: + + +``` +var resourceRecord = function(myName, myAddress) { + var resourceName = myName; + var resourceAddress = myAddress; + var accessRight = "HR"; + return { +   changeName: function(updateName, privilege) { +     //only HR can change the name +     if(privilege === accessRight ) { +       resourceName = updateName; +       return true; +     } else { +       return false; +     } +   },   +   changeAddress: function(newAddress) { +     //any associate can change the address +     resourceAddress = newAddress;           +   },   +   showResourceDetail: function() { +     console.log ("Name:" + resourceName + " ; Address:" + resourceAddress); +   } + } +} +//Create first record +var resourceRecord1 = resourceRecord("Perry","Office"); +//Create second record +var resourceRecord2 = resourceRecord("Emma","Office"); +//Change the address on the first record +resourceRecord1.changeAddress("Home"); +resourceRecord1.changeName("Perry Berry", "Associate"); //Output is false as only an HR can change the name +resourceRecord2.changeName("Emma Freeman", "HR"); //Output is true as HR changes the name +resourceRecord1.showResourceDetail(); //Output - Name:Perry ; Address:Home +resourceRecord2.showResourceDetail(); //Output - Name:Emma Freeman ; Address:Office +``` + +The resource records (`resourceRecord1` and `resourceRecord2`) are independent of one another. Each closure references a different version of the `resourceName` and `resourceAddress` variable through its own closure. You can also apply specific rules to how private variables need to be handled—I added a check on who can modify `resourceName`. + +### Use closures + +Understanding closure is important, as it enables deeper knowledge of how variables and functions relate to one another and how JavaScript code works and executes. + +-------------------------------------------------------------------------------- + +via: https://opensource.com/article/21/2/javascript-closures + +作者：[Nimisha Mukherjee][a] +选题：[lujun9972][b] +译者：[译者ID](https://github.com/译者ID) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://opensource.com/users/nimisha +[b]: https://github.com/lujun9972 +[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/programming-code-keyboard-laptop-music-headphones.png?itok=EQZ2WKzy (Woman programming) +[2]: https://opensource.com/article/20/11/javascript-popular +[3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures +[4]: https://opensource.com/sites/default/files/uploads/execution-context.png (Execution context for JS code) +[5]: https://creativecommons.org/licenses/by-sa/4.0/