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

深入理解Javascript 函数作用域闭包

2014-06-08 14:39 633 查看

在上一讲
深入理解Javascript window对象，我们知道

Javascript 运行时有一个上下文环境，它就是window

那我们来验证一下，是不是真的？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>深入理解Javascript</title>
<script type="text/javascript" charset="utf-8">
var a1 = 'a1';
var f1 = (function() {
var a2 = 'a2';
a3 = 'a3';
window.a4 = 'a4';
})();
function f2() {

}
</script>
</head>
<body>
<h1>深入理解Javascript</h1>
</body>
</html>

f1 指向一个 匿名函数，且该函数立即被执行了；

f2是一个普通的函数；

在 Mozilla Firefox 中，我们用firebug 查看DOM 结构

从DOM结构中我们可以推出：

a1 ,a3 , a4 ,f1 ,f2 是 全局变量；
a2 是局部变量。
我们来分析一下这是为什么？
a1 是在 <script type="text/javascript" charset="utf-8"> </script> 中定义的；此时它的上下文环境指向的是window；
a2 是在function() {} 匿名函数内，定义的变量，此时它的上下文环境指向的是这个匿名函数本身；
a3 也是在function() {} 匿名函数内，定义的变量，但其没有用var关键字定义，所以a3的上下文环境指向的是window；
而a4 的话，我们显式的指定其上下文环境为window

我们再分析：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>深入理解Javascript</title>
<script type="text/javascript" charset="utf-8">
var a1 = 'a1';
var f1 = (function() {
var a2 = 'a2';
a3 = 'a3';
window.a4 = 'a4';
})();
function f2() {
console.log("a1 = ", a1);
console.log('a2 = ', a2)
};
f2();
</script>
</head>
<body>
<h1>深入理解Javascript</h1>
</body>
</html>

f2 函数 被定义 之后 就明确了该函数的作用域 ，可理解 { } 包裹的就是其作用域 ，

1、函数 执行后， 输出 a1 = a1 ；说明在f2 可以访问 上级 作用域中的 变量；

2、但 当访问 a2 的时候 出现 未定义 错误；

那我们怎么可以做到f2 中访问f1 中的 a2 变量呢？

我们从上面推理的第一条中 看到： f2 可以访问 上级 作用域中的 变量；

仔细一想，就阔然开朗了，于是乎，改进我们的代码 ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>深入理解Javascript</title>
<script type="text/javascript" charset="utf-8">
var a1 = 'a1';
var f1 = (function() {
var a2 = 'a2';
a3 = 'a3';
window.a4 = 'a4';

function getA2() {
return a2;
};

return getA2;
})();
function f2() {
console.log("a1 = ", a1);
console.log('a2 = ', f1())
};
f2();
</script>
</head>
<body>
<h1>深入理解Javascript</h1>
</body>
</html>

我们在f1 函数内部 定义了一个 函数 function getA2(){return a2;};
根据推理的第一条 ，这个函数当然能访问 a2 变量了，
我们把这个getA2函数 作为返回值 ；
当匿名函数执行完的时候，f1 指向getA2;
故调用f1()函数 就能输出a2 的值了；

Javascript语言特有的"链式作用域"结构（chain
scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

深入理解Javascript 函数作用域 闭包

深入理解Javascript 函数作用域闭包