您的位置:首页 > Web前端 > JavaScript

JavaScript 作用域和闭包——另一个角度:扩展你对作用域和闭包的认识【翻译+整理】

2013-10-08 21:41 881 查看
原文地址

——这篇文章有点意思,可以扩展你对作用域和闭包的认识。

本文内容

背景
作用域
闭包 臭名昭著的循环问题
自调用函数(匿名函数)

其他
我认为,尝试向别人解释 JavaScript 作用域和闭包是很纠结的事情。

背景

有很多文章和博客都在试图解释的作用域(scope)和关闭(closure),但总体来说,我认为大多数都不是很清楚。此外,一些人想当然地认为,之前,每个人都已经大概用15种其他语言开发,而我的经验是,很多这样编写 JavaScript 代码的人都具有 HTML 和 CSS 背景,而不是 C 和 Java。

因此,本文的目标是,让每个人掌握什么是作用域和闭包,他们如何工作,特别是你如何可以从中受益。在阅读本文前,你需要理解变量和函数这些基本概念。

 

作用域(Scope)

作用域是指变量和函数可访问性在哪里,以及执行环境是什么。最基本的是,一个变量或函数可以定义在全局或局部作用域。变量具有所谓的函数作用域,函数跟变量具有相同的作用域。

全局(Global)作用域

当是全局的时候,意味着,在你的代码中,可以从任何地方访问。如下代码所示:

        var monkey = "Gorilla";


[code] 


function greetVisitor() {


return alert("Hello dear blog reader!");


}

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

如果该代码执行在 Web 浏览器中,那么,函数的作用域是 window,因此,对运行在 Web 浏览器窗口中所有东西,该函数都是可用的。

局部(Local)作用域

与全局作用域相反,局部作用域只是在你某部分的代码中定义并访问,如一个函数。代码如下所示:

        function talkDirty() {


[code] var saying = "Oh, you little VB lover, you";


return alert(saying);


}


alert(saying); // Throws an error

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上面代码,变量 saying 只在 talkDirty 函数内可用。而在外边,更本没有定义。注意:如果声明 saying 前边没有 var 关键字,那么该变量将自动变成一个全局变量。

这也意味着,如果你有嵌套(nested)函数,那么,这个嵌套函数将可以访问包含其函数内的变量和函数:

        function saveName(firstName) {


[code] function capitalizeName() {


return firstName.toUpperCase();


    }


var capitalized = capitalizeName();


return capitalized;


}


alert(saveName("Robert")); // Returns "ROBERT"

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

正如上面看到的,嵌套函数 capitalizeName 不需要任何参数传递,就可以完全访问它外边的 saveName 函数的参数 firstName。清楚起见,让我们看下面的例子:

        function siblings() {


[code] var siblings = ["John", "Liza", "Peter"];


function siblingCount() {


var siblingsLength = siblings.length;


return siblingsLength;


    }


function joinSiblingNames() {


return "I have " + siblingCount() + " siblings:\n\n" + siblings.join("\n");


    }


return joinSiblingNames();


}


alert(siblings()); // Outputs "I have 3 siblings: John Liza Peter"

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上面代码,那两个嵌套函数都可以访问包含其函数内的 siblings 数组,并且,每个嵌套函数都可以同等地访问另一个嵌套函数(在这种情况下,joinSiblingNames 可以访问 siblingCount)。但是, siblingCount 函数中的变量 siblingsLength 只在它所在的函数可用,也就是作用域。

 

闭包(Closures)

现在,当你希望获得更好地掌握作用域是什么时,让我们向组合添加闭包。闭包是表达式,通常是函数,再一个某个上下文环境内进行变量设置。或者,为了尝试并使其更容易,涉及局部变量的内部函数创建闭包。例如:

        function add(x) {


[code] return function (y) {


return x + y;


    };


}


var add5 = add(5);


var no8 = add5(3);


alert(no8); // Returns 8

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

发生了什么?

当 add 函数被调用时,它返回了一个函数。

这个返回的函数关闭上下文环境,记住参数 x 在那个时候是什么(例如,上面代码的 5)。

当调用 add 函数的返回结果被分配给变量 add5 时,add5 函数总是知道 x 是什么,当 add5 被初始化创建时。

add5 变量引用一个函数,它总是把传给它的参数加 5。

这意味着,当用 3 调用 add5 时,它应该返回 3 加 5,等于 8。

因此,在 JavaScript 世界里,事实上,add5 函数实际像如下所示:

        function add5(y) {


[code] return 5 + y;


}

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

臭名昭著的循环问题

有多少次你创建一个循环,想以某种方式分配 i 的值,例如:给一个元素,有没有发现它只是返回的最后一个 i 的值?

错误的引用

让我们看下错误的代码,它创建五个链接元素,每个元素的文本值为 i,并且每个元素的单击事件为弹出内容为 i 的 alert。把这五个元素追加到 document body:

        function addLinks() {


[code] for (var i = 0, link; i < 5; i++) {


link = document.createElement("a");


link.innerHTML = "Link " + i;


link.onclick = function () {


alert(i);


};


document.body.appendChild(link);


    }


}


window.onload = addLinks;

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

每个元素都获得了正确的文本,例如“Link 0”、“Link 1”等等,但是你单击的每个链接,alert 中的值都是 5,这显然不对,为什么?原因在于,变量 i 以 1 递增,可 onclick 事件没有被执行,仅仅是应用到了元素,i 再增加 1。

因此,循环继续直到等于 5,这是 i 的最后一个值,此时,函数 addLinks 退出。之后,当 onclick 事件实际被触发时,只得到 i 的最后一个值。

正确的引用

你所需要做的就是创建一个闭包,这样,当你把 i 值应用到元素的 onclick 事件时,就会在触发那个时刻得到 i 的准确值。如下所示:

        function addLinks() {


[code] for (var i = 0, link; i < 5; i++) {


link = document.createElement("a");


link.innerHTML = "Link " + i;


link.onclick = function (num) {


return function () {


alert(num);


    };


} (i);


document.body.appendChild(link);


    }


}


window.onload = addLinks;

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上面代码就没有问题了。单击第一个创建的链接元素,alter 为 0;第二个为 1 等等。该解决方案是,应用到 onclick 事件的内部函数创建了一个闭包,在那里引用参数 num,也就是 i 的值。

自调用函数(Self-Invoking Functions)

自调用函数是那些自动执行的函数(匿名函数),并且创建它们自己的闭包,如下代码所示:

        (function () {


[code] var dog = "German Shepherd";


alert(dog);


})();


alert(dog); // Returns undefined

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

dog 变量只在其作用域内可用。它可以解决我们上面的循环问题,而且这也是 Yahoo JavaScript Module Pattern 的基础。

Yahoo JavaScript Module Pattern

Yahoo JavaScript 模块模式的要点是,它使用了一个自调用函数来创建一个封闭,因此,使具有私有和公共的属性和方法成为可能。一个简单的例子,如下所示:

        var person = function () {


[code] // Private


var name = "Robert";


return {


getName: function () {


return name;


},


setName: function (newName) {


name = newName;


}


    };


} ();


alert(person.name); // Undefined


alert(person.getName()); // "Robert"


person.setName("Robert Nyman");


alert(person.getName()); // "Robert Nyman"

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

这个代码就很优雅了。现在,你可以自己决定公开什么,隐藏什么了。变量 name 就是对外部隐藏的(在外部引用为 undefined),但可以通过 getName 和 setName 函数访问,因为,它们创建了闭包,在里边引用了 name 变量。

 

其他

JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】

JavaScript 从闭包可以做什么开始,将有助于理解闭包

JavaScript 闭包

 

下载 Demo
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: