深入研究javascript闭包：一个实用的方法

学习一门新语言涉及一系列步骤，而掌握一门新语言则是耐心、实践、错误和经验的产物。

有些开发人员将拥有足够的知识来根据客户的需求来提供特性，但是要做一个好开发人员，它需要的不仅仅是它。

一个优秀的开发人员是一个需要时间回来并能很好地掌握语言的基础/核心概念的人。

今天我们深入研究javascript闭包，希望您所学习的知识对于您的项目有好处。

什么是javascript闭包？

JavaScript闭包当内部函数可以访问外部函数成员时(词汇范围即使在外部函数的范围外执行时也可以。

因此，我们不能谈论关闭问题，同时也不履行职能和范围。

javascript中的范围

范围指程序中定义的变量的可见性程度。在javascript中创建范围的方法包括：try-catch blocks, functions，let keyword还有花括号里的其他。我们主要有两种不同的范围：全球范围和局部范围.

var initialBalance = 0 
// Global Scopefunction deposit (amount) 
{ /** * Local Scope * Code here has access to anything declared in the global scope */ 
var newBalance = parseInt(initialBalance) + parseInt(amount) return newBalance}

JavaScript中的每个函数在声明时都会创建自己的本地作用域。

这意味着，在函数的本地范围内声明的任何东西都不能从外部访问。请考虑以下说明：

var initialBalance = 300 
// Variable declared in the Global Scopefunction withdraw (amount) 
{ var balance 
// Variable declared in function scope balance = parseInt(initialBalance) - parseInt(amount) 
return balance}console.log(initialBalance) 
// Will output initialBalance value as it is declared in the global scopeconsole.log(balance) 
// ReferenceError: Can't find variable: balance

词法范围

JavaScript的词法范围在编译阶段。它设置变量的范围，以便它只能从定义它的代码块中调用/引用它。

在周围函数块中声明的函数可以访问周围函数的词法范围内的变量。

var initialBalance = 300 
// Global Scopefunction withdraw (amount) 
{ /** * Local Scope * Code here has access to anything declared in the global scope */ 
var balance = parseInt(initialBalance) - parseInt(amount) const actualBalance = (function () 
{ const TRANSACTIONCOST = 35 return balance - TRANSACTIONCOST /
** * Accesses balance variable from the lexical scope */ })() 
// Immediately Invoked Function expression. IIFE 
// console.log(TRANSACTIONCOST) 
// ReferenceError: Can't find variable: TRANSACTIONCOST return actualBalance}

调用其封闭函数之外的内部函数，但仍然维护对其封闭函数(词法范围)中变量的访问，从而创建一个javascript闭包。

function person () 
{ var name = 'Paul' 
// Local variable var actions = { speak: function () 
{ // new function scope console.log('My name is ', name) 
/** * Accessing the name variable from the outer function scope (lexical scope) */ } }
// actions object with a function return actions 
/** * We return the actions object * We then can invoke the speak function outside this scope */}
person().speak() // Inner function invoked outside its lexical Scope

闭包允许我们公开接口，同时隐藏和保存外部范围内的执行上下文。

一些javascript设计模式使用闭包。

模块模式

其中一个很好实现的模式就是模块模式，这个模式允许您模仿：私有、公共和特权成员。

var Module = (function () 
{ var foo = 'foo' // Private Property function addToFoo (bam) 
{ // Private Method foo = bam return foo } 
var publicInterface = { bar: function () 
{ // Public Method return 'bar' }, bam: function () 
{ // Public Method return addToFoo('bam') // Invoking the private method } } 
return publicInterface // Object will contain public methods})()Module.bar() // barModule.bam() // bam

根据上面的模块模式说明，只有返回对象中的公共方法和属性可以在闭包的执行上下文之外使用。

所有私有成员仍然存在，因为它们的执行上下文保存但隐藏在外部范围内。

关于闭包的更多插图

当我们将函数传递到setTimeout或者任何类型的回调。由于闭包函数的作用，函数仍然记住词法范围。

function foo () { var bar = 'bar' setTimeout(function () { console.log(bar) }, 1000)}foo() // bar

闭包和循环

for (var i = 1; i <= 5; i++)
 { (function (i) { setTimeout(function ()
 { console.log(i) }, i * 1000) })
(i)}/*** Prints 1 thorugh 5 after each second* Closure enables us to remember the variable i* An IIFE to pass in a new value of the variable i for each iteration* IIFE (Immediately Invoked Function expression)*/

for (let i = 1; i <= 5; i++) { (function (i) { setTimeout(function () { console.log(i) }, i * 1000) })(i)}/*** Prints 1 through 5 after each second* Closure enabling us to remember the variable i* The let keyword rebinds the value of i for each iteration*/

我打赌我们现在已经了解闭包了，并且可以做以下操作：

• 演示它的使用例或识别它在我们从未知道我们使用它的上下文中。
• 按照我们希望的情况维护执行上下文
• 在javascript模块模式中实现代码
• 使用闭包在我们的代码中，清楚地理解

　　加入小编的前端学习q u n，领取精品的前端免费学习课程视频，同时我将为您分享精品资料。

        213+126+486   邀请码：落叶