本文深入探讨JavaScript中的函数定义方式、闭包概念及其应用场景，包括如何利用闭包实现私有变量及模仿块级作用域。
一、定义函数
1、定义函数的方式有两种：函数声明与函数表达式。
2、函数声明
函数声明方式有一个特征是函数声明提升，也就是说在执行代码之前会先读取函数声明，这意味着可以把函数声明放在调用它的语句的后面，如下：
getColor();
function getColor() {
return "red";
}对于函数表达式，与其它表达式一样，在使用前必须先赋值，不会像函数声明一样得到提升，如下：
getColor(); // 错误，必须先赋值
var getColor = function() {
return "red";
}如下代码所示，对于示例一，在ECMAScript中属于无效语法，JavaScript引擎会尝试修正错误，但是各个浏览器修正错误的实现不一样，所以对于这种语法可能得到不一致的结果；但是使用示例二的方式就是正确的。
// 示例一
if (condition) {
function getColor() {
return "red";
}
} else {
function getColor() {
return "blue";
}
}
// 示例二
var getColor;
if (condition) {
getColor = function() {
return "red";
};
} else {
getColor = function() {
return "blue";
};
}如下代码所示，代码中最后只有myFactorial变量指向了原始函数，执行myFactorial(5)时由于必须执行factorial()，而factorial已经不再是函数了，所以导致错误。
function factorial(num) {
if (num <= 1) {
return 1;
} else {
return num * factorial(num - 1);
}
}
var myFactorial = factorial;
factorial = null;
myFactorial(5); // 出错
function factorial(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num - 1);
}
}
var factorial = (function f(num) {
if (num <= 1) {
return 1;
} else {
return num * f(num - 1);
}
});1、闭包是指有权访问另一个函数作用域中的变量的函数。
2、创建闭包最常见的方式就是在一个函数内部创建另一个函数，如下：
function closure(name) {
return function(obj) {
return obj[name];
};
}3、当某个函数第一次被调用时，会创建一个执行环境以及相应的作用域链，并把作用域链赋值给一个特殊的内部属性([[Scope]])，然后使用this、arguments和其它命名参数的值来初始化函数的活动对象，但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，依次类推直到作为作用域链终点的全局执行环境。而在函数执行过程中，读取或写入变量的值就需要在作用域链中查找变量，如下代码所示：
function compare(v1, v2) {
if (v1 < v2) {
return -1;
} else if (v1 > v2) {
return 1;
} else {
return 0;
}
}
var result = compare(5, 10);
后台的每个执行环境都有一个表示变量的对象，即变量对象；全局环境的变量对象始终存在，而函数的局部环境的变量对象只在函数执行的过程中存在。在创建compare()函数时会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部的[[Scope]]属性中；当调用compare()函数时，会为函数创建一个执行环境，然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链，然后又有一个活动对象(在此作为变量对象使用)被创建并被推入执行环境作用域链的前端，所以这里的compare()函数的执行环境中，其作用域链包含两个变量对象：本地活动对象和全局变量对象。所以作用域链本质就是一个指向变量对象的指针列表，只包含引用但不实际包含变量对象。
无论何时在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量，一般来说，当函数执行完毕后，局部活动对象就会被销毁，内存中仅仅保存全局作用域(全局执行环境的变量对象)。但是闭包的情况不同，在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中，所以以上的closure函数内部定义的匿名函数的作用域链中实际包含外部函数closure的活动对象，如下图所示是执行这些代码时外部函数与内部匿名函数的作用域链：
在匿名内部函数从外部函数closure()中被返回后，它的作用域链被初始化为包含外部函数closure()的活动对象和全局变量对象，所以匿名内部函数就可以访问在closure()函数中定义的所有变量；而且当closure()函数执行完毕后，其活动对象也不会被销毁，因为匿名内部函数的作用域链仍然在引用该活动对象；也就是说当closure()函数返回后，其执行环境的作用域链会被销毁，但是它的活动对象仍然会留在内存中，直到匿名内部函数被销毁后，closure()函数的活动对象才会被销毁，如下：设置f = null就解除了对匿名内部函数的引用，等于通知垃圾收集例程将其清除，随着匿名函数的作用域链被销毁，除了全局作用域之外的其它作用域也都可以安全的销毁。
var f = closure("age");
var result = f({"age": 10});
// 解除对匿名函数的引用，以便释放内存
f = null;5、闭包与变量
闭包只能取得包含函数(外部函数)中任何变量的最后一个值，如下：
function closure() {
var result = new Array();
for (var i = 0; i < 10; i++) {
result[i] = function() {
return i;
};
}
return result;
}
function closure() {
var result = new Array();
for (var i = 0; i < 10; i++) {
result[i] = function(num) {
return function() {
return num;
}
}(i);
}
return result;
}6、关于this对象
this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window；而当函数被作为某个对象的方法调用时，this等于那个对象。但是由于匿名函数的执行环境具有全局性，因此其this对象通常指向window(在通过call()或apply()改变函数执行环境的情况下，this就会指向其它对象)，但有时由于编写闭包的方式不同，这点可能不是那么明显，如下：
var name = "zhangsan";
var obj = {
name: "lisi",
getName: function() {
return function() {
return this.name;
}
}
};
obj.getName()(); // 在非严格模式下结果为zhangsan
var name = "zhangsan";
var obj = {
name: "lisi",
getName: function() {
var thisObj = this;
return function() {
return thisObj.name;
}
}
};
obj.getName()(); // lisi另外，在一些特殊情况下，this的值可能会意外的被改变，如下：
var name = "zhangsan";
var obj = {
name: "lisi",
getName: function() {
return this.name;
}
};
obj.getName(); // lisi
(obj.getName)(); // lisi
(obj.getName = obj.getName)(); // 在非严格模式下结果是zhangsan7、内存泄漏
在IE9之前，对JavaScript对象和COM对象使用的是不同的垃圾收集例程，所以闭包在IE9之前的版本中会导致一些问题，就是如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。如下：
function closure() {
var element = document.getElementById("id");
element.onclick = function() {
alert(element.id);
};
}
function closure() {
var element = document.getElementById("id");
var id = element.id;
element.onclick = function() {
alert(id);
};
element = null;
}三、模仿块级作用域
1、由于在JavaScript中是没有块级作用域的，所以在块语句中定义的变量实际上是在包含函数中(函数活动对象)而非块语句中创建的。如下代码所示，即使错误的重新声明了变量i，也不会改变了它的值，因为JavaScript不会通知是否多次声明了同一个变量，只会对后续的声明视而不见，但是如果后续的声明中还包含对变量的初始化，则会执行后续声明中的变量初始化。
function block(count) {
for (var i = 0; i < count; i++) {
alert(i);
}
var i; // 重新声明变量i
alert(i);
}
(function() {
// 在这里定义块级作用域的变量
})();
function block(count) {
(function() {
// 在这里定义块级作用域的变量
for (var i = 0; i < count; i++) {
alert(i);
}
})();
alert(i); // 错误
}<html>
<body>
<script type="text/javascript">
(function() {
var color = "red";
if ("red" === color) {
alert("OK");
}
})();
</script>
</body>
</html>1、严格来说JavaScript中没有私有成员的概念，所有对象属性都是公有的；但是有一个私有变量的概念，任何函数中定义的变量都可以认为是私有变量，因为不能在函数的外部访问这些变量，私有变量包括函数的参数、局部变量和函数内部定义的其它函数。在函数内部创建闭包，则闭包可以通过自己的作用域链访问这些私有变量，所以可以通过这种方式就可以创建用以访问私有变量的公有方法。把有权访问私有变量和私有函数的公有方法称为特权方法。
2、有两种方式可以在对象上创建特权方法：
- 方式一：在构造函数中定义特权方法，如下：
function MyObject() {
// 定义私有变量和私有函数
var privateVar = 100;
function privateFunc() {
return true;
}
// 特权方法
this.publicMethod = function() {
privateVar++;
return privateFunc();
};
}- 方式二：使用静态私有变量来实现特权方法，通过在私有作用域中定义私有变量或函数来创建特权方法，如下：
(function() {
// 定义私有变量和函数
var privateVar = 10;
function privateFunc() {
return false;
}
// 构造函数
MyObject = function() {};
// 公有/特权方法
MyObject.prototype.publicMethod = function() {
privateVar++;
privateFunc();
};
})();(function() {
var name = "";
Person = function(value) {
name = value;
};
Person.prototype.getName = function() {
return name;
};
Person.prototype.setName = function(value) {
name = value;
};
})();
var p1 = new Person("zhangsan");
p1.getName(); // zhangsan
p1.setName("lisi");
p1.getName(); // lisi
var p2 = new Person("wangwu");
p2.getName(); // wangwu
p1.getName(); // wangwuvar singleton = function() {
// 私有变量和私有函数
var privateVar = 10;
function privateFunc() {
return false;
}
// 特权/公有方法和属性
return {
publicProperty: true,
publicMethod: function() {
privateVar++;
return privateFunc();
}
};
}();var application = function() {
// 私有变量
var components = new Array();
// 初始化
components.push(new Object());
return {
getComponentCount: function() {
return components.length;
},
registerComponent: function(component) {
if (typeof component == "object") {
components.push(component);
}
}
};
}();var singleton = function() {
// 私有变量和私有函数
var privateVar = 10;
function privateFunc() {
return false;
}
// 创建对象，这里假设CustomObject类型已定义
var obj = new CustomObject();
// 添加特权/公有方法和属性
obj.publicProperty = true;
obj.publicMethod = function() {
privateVar++;
return privateFunc();
};
// 返回该对象
return obj;
}();参考书籍：《JavaScript高级程序设计》（第三版）
扫一扫
4640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
