Ch7 Function Expressions ( JavaScript 中的函数表达式 )

    本文为书籍《Professional JavaScript for Web Developers, 3rd Edition》英文版第 7 章：“Function Expressions” 个人学习总结，主要介绍 JavaScript 中的闭包、局部变量(局部作用域)和私有变量等内容。

 

一.闭包
JavaScript中的闭包，是指一个函数可以访问另一个函数作用域中 的变量。这通常通过将一个函数定义在另一个函数内部来完成。如：
function createComparisonFunction(propertyName) { return function (object1, object2) { var value1 = object1[propertyName];//访问外部函数变量 var value2 = object2[propertyName]; if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }; } //create function var compareNames = createComparisonFunction("name"); //call function var result = compareNames({ name: "Nicholas" }, { name: "Greg" }); //dereference function - memory can now be reclaimed compareNames = null;
闭包会引用外部函数作用域，会占用更多的内存，过度使用闭包， 会导致性能问题。所以，仅当必要时才使用闭包。对产生闭包的函数， 使用后应该解除引用。
1.闭包与变量
闭包的作用域链有一个明显的副作用。闭包总是获得外部函数变量 的最终值。如：
function createFunctions() { var result = new Array(); for (var i = 0; i < 10; i++) { result[i] = function () { return i; }; } return result; } var funcArr = createFunctions(); alert(funcArr[0]()); // 10 alert(funcArr[1]()); // 10 // ... alert(funcArr[9]()); // 10 上面的代码中，外部函数产生一个函数数组并返回。函数数组中 的每个元素都是一个函数，每个函数都返回 i 变量。看起来，每个 函数应该返回每次循环的 i 值，依次返回 1 到 10，但事实情况是， 函数数组中每个函数的返回结果都是 10。这是因为，每个内部函数 返回的是变量 i，而不是 i 在某个时刻的特定值。而 i 的作用域是 整个外部函数，当外部函数执行完成后，i 的值是 10。 可以通过在每个内部函数的内部，再产生一个匿名函数并返回来解 决上面的问题。如：
function createFunctions() { var result = new Array(); for (var i = 0; i < 10; i++) { result[i] = function (num) { return function () { return num; }; } (i); //使得该层匿名函数立即执行 } return result; } var funcArr = createFunctions(); alert(funcArr[0]()); // 0 alert(funcArr[1]()); // 1 // ... alert(funcArr[9]()); // 9 2.闭包与 this 对象
在闭包内使用 this 对象将产生一些复杂的行为。this 对象的值 基于函数所在的执行环境在运行时决定：在全局函数中使用时，this 等于 window (非严格模式)或 undefined (严格模式)；而当作为对象 的方法调用时， this 等于这个对象。如：
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { return this.name; }; } }; alert(object.getNameFunc()()); //"The Window" -- 非严格模式下 在上面的代码中，最后一行执行的结果并不是我们所期望的"My Object"， 而是"The Window"。 每个函数一旦被调用，它将自动获得 this 和 arguments 两个变量。 一个内部函数是不能直接从外部函数访问到这两个变量的。可以通过将 this 对象存储在另一个变量中来解决这个问题。如：
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { var that = this; //将 this存储在that中 return function () { return that.name; //通过that访问name }; } }; alert(object.getNameFunc()()); //"My Object" 要让闭包访问外部函数的 this 和 arguments 对象，可以通过将它 们的引用存储在另一个变量中来完成。
3.内存泄露
在IE9 之前的IE浏览器中，通过闭包访问 HTML 元素会导致元素不能 被垃圾回收器销毁。如：
function assignHandler() { var element = document.getElementById("someElement"); element.onclick = function () { alert(element.id); }; }
上面的代码产生一个闭包，匿名函数保持对 element 变量的引用， 使其占用的内存不能被释放。可通过下面的方法来解决这个问题：
function assignHandler() { var element = document.getElementById("someElement"); var id = element.id; element.onclick = function () { alert(id); }; element = null; }
二.模拟块级作用域和私有作用域
JavaScript中没有直接的块级作用域，然而，可以使用匿名函数表 达式来模拟块级作用域，任何定义在匿名函数中的变量在匿名函数执行 完之后都将被销毁，在匿名函数外访问这些变量将会产生错误。如：
function outputNumbers(count) { (function () { for (var i = 0; i < count; i++) { alert(i); } })(); alert(i); //causes an error }
匿名函数表达式提供了创建私有作用域的方法。这种技术通常应用 在函数外部的全局作用域中，防止变量和函数添加到全局作用域中。在 大型应用中，可以避免命名冲突。如：
(function () { var now = new Date(); if (now.getMonth() == 0 && now.getDate() == 1) { alert("Happy new year!"); } })();
上例中，匿名函数内的 now 变量只能在匿名函数内被访问。成为 局部变量。 这种模式不会有闭包产生的内存问题，因为不存在对匿名函数的 引用。当函数执行完成后，作用域链将被立即销毁。 上例中的匿名函数实际上是一种立即执行的匿名函数表达式。
三.私有变量
JavaScript中没有“私有成员”的概念，但却有“私有变量”的概念。 私有变量包括函数参数、局部变量和定义在函数内部的函数。私有变量 只能在函数内部访问，不能在外部访问。闭包可以访问私有变量。 利用这个特点，可以在对象上定义公共方法访问对象的私有变量， 这种公共方法被称作“特权方法”。利用这种模式，能够隐藏不可以被直 接改变的数据。 有两种定义特权方法的方式：第一种方式是在对象的构造函数内定 义，如：
function MyObject() { //private variables and functions var privateVariable = 10; function privateFunction() { return false; } //privileged methods this.publicMethod = function () { privateVariable++; return privateFunction(); }; }
因为构造函数模式所产生的方法不能在多个实例间共享，使用静 态私有变量可以解决这个问题。
1.静态私有变量
特权函数可以通过函数表达式来实现。函数表达式产生私有作用域， 其内部定义的私有变量将在对象的各实例间共享，因而成为静态私有变 量。函数表达式内定义的对象方法成为特权方法(也是闭包)，可以访问 私有变量。对象的构造函数使用命名函数表达式定义，但不使用 var 关 键字声明，这样可以在全局范围内访问，不过，这样做在严格模式下会 产生错误。如：
(function () { //private variables and functions var privateVariable = 10; function privateFunction() { return false; } //constructor MyObject = function () { }; //public and privileged methods MyObject.prototype.publicMethod = function () { privateVariable++; return privateFunction(); }; })();
这种模式的私有变量和公共方法都会在所有实例间共享，如：
(function () { var name = ""; Person = function (value) { name = value; }; Person.prototype.getName = function () { return name; }; Person.prototype.setName = function (value) { name = value; }; })(); var person1 = new Person("Nicholas"); alert(person1.getName()); //"Nicholas" person1.setName("Greg"); alert(person1.getName()); //"Greg" var person2 = new Person("Michael"); alert(person1.getName()); //"Michael" alert(person2.getName()); //"Michael" 2.模块模式
模块模式也是一种单例模式。单例模式在JavaScript中通常使用下 面的方法产生：
var singleton = { name: value, method: function () { //method code here } };
模块模式是对单例模式的提高，包含了私有变量和特权方法。如：
var singleton = function () { //private variables and functions var privateVariable = 10; function privateFunction() { return false; } //privileged/public methods and properties return { publicProperty: true, publicMethod: function () { privateVariable++; return privateFunction(); } }; } ();
模块模式在单例模式需要进行初始化和访问私有变量时很有用。在 Web 应用程序中，通常使用单例模式管理应用程序级的信息。如：
function BaseComponent() { } function OtherComponent() { } var application = function () { //private variables and functions var components = new Array(); //initialization components.push(new BaseComponent()); //public interface return { getComponentCount: function () { return components.length; }, registerComponent: function (component) { if (typeof component == "object") { components.push(component); } } }; } (); application.registerComponent(new OtherComponent()); alert(application.getComponentCount()); //2 模块模式的实例都是 Object，不能使用 instanceof 运算符有效地 判断类型。
3.模块增强模式
这也是一种模块模式，但在返回所产生的对象之前，可以向其添加 属性和/或方法。如：
var singleton = function () { //private variables and functions var privateVariable = 10; function privateFunction() { return false; } //create object var object = new CustomType(); //add privileged/public properties and methods object.publicProperty = true; object.publicMethod = function () { privateVariable++; return privateFunction(); }; //return the object return object; } ();
在模块模式中，如果 application 对象需要是一个BaseComponent 实例，可以使用下面的方式：
function BaseComponent() { } function OtherComponent() { } var application = function () { //private variables and functions var components = new Array(); //initialization components.push(new BaseComponent()); //create a local copy of application var app = new BaseComponent(); //public interface app.getComponentCount = function () { return components.length; }; app.registerComponent = function (component) { if (typeof component == "object") { components.push(component); } }; //return it return app; } (); alert(application instanceof BaseComponent); application.registerComponent(new OtherComponent()); alert(application.getComponentCount()); //2