7. 函数表达式

定义函数的方式有两种:

  • 函数声明statement
    • function func(){}
    • 函数声明提升 function declaration hoisting
  • 函数表达式expression
    • var func = function(){}
    • 匿名函数 anonymous
    • 命名函数表达式

7.1 递归

  • 递归:一个函数通过名字调用自身
  • 经典应用:阶乘
function factorial(num){
	if(num > 1){
		return num * factorial(num-1);
	}else{
		return num;
	}
}
  • 经典错误
var myFactorial = factorial;
factorial = null;
myFactorial(10); // 出错
  • 一个过时的及决方案,使用arguments.callee指向正在执行的函数指针,现在不再赞成了
function factorial(num){
	if(num > 1){
		return num * arguments.callee(num-1);
	}else{
		return num;
	}
}
  • 命名表达式named function expression,递归的推荐解决方案
var factorial = function factorial(num){
	if(num > 1){
		return num * factorial(num-1);
	}else{
		return num;
	}
}

7.2 闭包

闭包是指有权访问另一个函数作用域中的变量的函数。

  • 当某个函数被调用时,会创建一个执行环境execution context及相应的作用域链scope chain;然后使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。作用域链中,外部函数的活动对象处于第二位,外部函数的外部函数的活动对象处于第三位,······直至作用域链终点,即全局执行环境。
    • [[Scope]]
    • 每个执行环境都有一个表示变量的对象————变量对象
    • 全局环境的变量对象始终存在,函数(局部环境)的变量对象只在函数执行的过程中存在
    • 创建函数时,会创建一个预先包含外部执行环境变量对象的作用域链,这个作用域链被保存在[[Scope]]中
    • 内部函数会把外部函数的活动对象添加到它的作用域链中
    • 外部函数执行完毕后,其活动对象也不会被销毁,因为内部函数的作用域链仍然在引用这个活动对象
    • 外部函数返回后,其执行环境作用域链会被销毁,但他的活动对象仍然留在内存中,直到内部函数被销毁,不再持有引用,其活动对象才会被销毁
  • 由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存
  • 经典问题:函数数组
function createFunctions(){
	var result = [];
	for(var i = 0; i < 10; i++){
		result[i] = function(){
			return i; // 每个闭包都持有变量i的引用,当他被调用时就会在外部作用域中找i的值
		}
	}
	return result;
}

// 使用IIFE改进
function createFunctions(){
	var result = [];
	for(var i = 0; i < 10; i++){
		result[i] = function(num){
			return function(){
				return num;
			};
		}(i); // 为每一个i创建了一个函数作用域保存一个副本
	}
	return result;
}

// ES6 let 块级作用域
  • var 和 let
    • let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式
    • 与var不同,let声明的变量只能是全局或者整个函数块的
    • var声明的变量的作用域是整个封闭函数
    • 在程序或者函数的顶层,let并不会像var一样在全局对象上创建一个属性
  • this
    • this对象是在运行时基于函数的执行环境绑定的
    • 匿名函数的执行环境具有全局性,因此其this对象通常指向window
    • 每个函数在被调用时都会自动获得两个特殊变量:thisarguments
    • 内部函数在搜索这两个变量时,只会搜索到其活动对象为止,不能访问外部函数的这两对象
  • 内存泄露
    • 闭包的作用域链中保存着一个HTML元素

7.3 模仿块级作用域

  • JavaScript从来不会告诉你多次声明了一个变量,他会忽略后续的声明,但会执行声明中的变量初始化
  • 块级作用域(私有作用域)
(function(){
	// 块级作用域
})()
  • 变量只是值的另一种表现形式,直接用值替换变量
var count = 5;
console.log(count);
// => 
console.log(5);

// 那么函数呢?
var someFunction = function(){
	// code
}
someFunction();
// =>
function(){
	// code
}(); // Error
// 出错原因是JavaScript将function关键字当做一个函数声明的开始,而函数声明后面不能跟圆括号
// 然而,函数表达式可以跟圆括号,所以如下
(function(){
	// code
})();

7.4 私有变量

  • 严格来讲,JavaScript中没有私有成员的概念;所有对象属性都是公有的。
  • 任何函数中定义的变量,都可以认为是私有变量,因为不能在函数外部访问这些变量
  • 私有变量包括
    • 函数参数
    • 局部变量
    • 内部函数
  • 闭包可以通过作用域链访问私有变量,所以可以用闭包创建访问私有变量的公有方法
    • 特权方法privileged method:有权访问私有变量和私有函数的公有方法
function MyObjcet(){
	// 私有变量
	var privateVariable = 10;
	// 私有方法
	function privateFuntion(){
		return false;
	}
	// 特权方法
	this.publicMethod = function(){
		privateVariable++;
		return privateFunction();
	}
}
// 隐藏不想被直接修改的数据
function Person(name){
	this.getName = function(){
		return name;
	}
	this.setName = function(value){
		name = value;
	}
}
// 构造函数模式的缺点,就是每个实例都会创建同样一组方法
// 静态私有变量
(function(){
	// 共享私有变量
	var privateVariable = 10;
	function privateFunction(){
		return privateVariable;
	}
	MyObject = function(){};
	// 共享方法
	MyObject.prototype.publicMethod = function(){
		privateVariable++;
		return privateFunction();
	}
}
)();
  • 模块模式(单例)
    • 前面是为了给自定义类型创建私有变量和特权方法
    • 道格拉斯提出模块模式module
    • 为单例创建私有变量和特权方法
    • JavaScript是以对象字面量模式来创建单例singleton对象的
var application = function(){
	// 私有属性或私有方法
	var components = [];
	// 初始化
	components.push(new Object());
	return {
		getComponentCount: function(){
			return components.length;
		},
		registerComponent: function(component){
			if(typeof component == "object"){
				components.push(component);
			}
		}
	}
}
  • 增强的模块模式
var application = function(){
	var components = new Array();
	components.push(new Object());
	// 创建一个application副本
	var app = new Object();
	app.getComponentCount = function(){
		return components.length;
	}
	app.registerComponent = function(component){
		if(typeof component == "object"){
			components.push(component);
		}
	}
	return app;
}