JS作用域链与闭包

词法作用域

var num = 123;
function foo1 () {
	console.log( num );
	var num = 456;
	console.log( num );
}
foo1();

1、预解析的过程
2、代码的执行过程
程序在执行过程中，会先将代码读取到内存中检查一下，会将所有的声明在此时进行标记，所谓的标记就是让js 解释器知道有这个名字，后面在使用名字的时候，不会出现未定义的错误。这个标记过程就是提升。
声明：
1、名字/标识符/变量名的声明

• 名字的声明就是让我们解释器知道有这个名字
• 名字没有任何数据与之对应

2、函数的声明

• 函数声明包含两部分
• 函数声明与函数表达式有区别
• 函数声明是单独写在一个结构中，不存在任何语句、逻辑判断等结构中

function f() {
	//函数声明 函数声明后面不加分号
	function func() {}
	//函数表达式
	if ( true ) {
		function func2() {}
	}
}

• 首先函数声明告诉解释器有这个名字存在，该阶段与名字声明一样
• 告诉解释器，这个名字对应的函数体是什么，将名字与函数体绑定

var num = 123;
function num() {
	alert( num );
}
num();

分析：
1、预解析代码，提升名字

• 首先提升名字 num
• 再提升函数名，但是名字已经存在，因此只做第二步，让名字与函数体对应上
• 结论就是，代码中已经有一个 函数 num 了

2、开始执行代码，第一句话从赋值语句开始执行

• 给num 赋值 1
• 覆盖了函数

3、调用num 由于num 中存储1 所以报错

问题

function foo() {}
var foo = function () {};
//1、上面的语法是声明，可以提升，因此在函数定义的上方也可以调用
//2、下面的语法是函数表达式，函数名是foo,它会提升(变量名提升)
//提升的不是函数体
//3、函数表达式也是支持名字语法的
var foo = function func() {};
foo();
//函数有一个属性name,表示的是函数名,
//只有带有函数名字的函数定义，才有 name 属性名，否则是""
//但是，函数表达式的名字，只允许在函数内部使用(IE8可以访问)

()可以将数据转换为表达式

结论:

新的浏览器中，写在if, while, dowhile 结构中的函数，都会将函数的声明转换成特殊的函数表达式

if(...) {
	function foo() {};
}
转换成
if(...) {
	var foo = function foo() {};
}

词法(代码)作用域

作用域

域表示范围，即作用范围，就是一个名字在什么地方可以被使用，什么时候不能使用

块级作用域

词法作用域，就是代码在编写过程中体现出来的作用范围，代码一旦写好，不用执行，作用范围就已经确定好了，这就是词法作用域

在js 中词法作用域的规则：

1、函数允许访问函数外的数据

var num = 123;
function foo(){
	console.log( num );
}
foo();

2、整个代码结构中只有函数可以限定作用域

在这里插入代码片

3、作用规则首先使用提升规则分析

if( false ) {
	var num = 123;
}
console.log( num );

4、如果当前作用规则中有名字了，就不考虑外面名字
(进入函数体内，需要再声明一次)

var num = 123;
function foo() {
	var num = 456;
	function func() {
		console.log( num )l
	}
	func();
}
foo();

作用域链

可以发现只有函数可以制造作用域结构，那么只要是代码，至少有一个作用域，即全局作用域，凡是代码中有函数，这个函数就构成另一个作用域，如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。那么，将这样的所有作用域列出来，可以有一个结构：函数内指向函数外的链式结构
作用域链和DOM数"一模一样"

绘制作用域链的步骤

1、看整个全局是一条链，即顶级链，记为0级链
2、看全局作用域中有什么成员声明，就以方格的形式绘制到0级链上
3、再找函数，只有函数可以限制作用域，因此从函数中引出新链，标记为一级链
4、然后在每一个一级链中再次往复刚才的行为

变量的访问规则

1、首先看变量在第几条链上，在该链上看是否有变量的定义与赋值，如果有直接使用
2、如果没有，到上一级链上去找( n-1 级链)，如果有直接用他，停止继续查找
3、如果还没有再次往下找… 直到全局链（ 0级 ），还没有就是 is not defined
4、注意：切记同级的链不可混合查找

补充

1、声明变量使用 var，如果不使用var，声明的变量就是全局变量**（禁用）**
2、因为在任何代码结构中都可以使用该语法，那么在代码维护的时候就会有问题，所以除非特殊原因不要这么用
3、下面代码的错误

function foo() {
	var i1 = 1 //局部
		i2 = 2, //全局
		i3 = 3; //全局
}

4、此时注意：

var arr = [];
for( var i = 0; i < 10; i++ ) {
	arr.push( i );
}
for( var i = 0; i < 10; i++ ) {
	console.log( arr[i] );
}
//一般都是将变量的声明全部放到开始的位置，避免因为提升而造成的错误
var arr = [], 
	i = 0;
for( ; i < 10; i++ ) {
	arr.push( i );
}
for( i = 0; i < 10; i++ ) {
	console.log( arr[i] );
}

闭包

闭包的含义就是闭合，包起来。简单的来说，就是一个具有封闭功能和包裹功能的结构。所谓的闭包就是，有一个具有封闭的对外不公开的，包裹结构，或空间
在js 中，函数可以构成闭包，一般函数是一个代码结构的封闭结构，即包裹的特性。同时根据作用域规则，只允许函数访问外部的数据，外部无法访问函数内部的数据。即封闭的，对外不公开的特性，即函数可以构成闭包

闭包要解决什么问题

1、闭包不允许外界访问
2、要解决的问题就是间接访问该数据
函数就可以构成闭包，要解决的问题就是访问到函数内部的数据

function foo() {
	var num = 123;
	return num;
}
var res = foo();
console.log( res );

1、这里的确是访问函数中的数据
2、但是该数据不好二次访问 ，因为第二次访问的时候又要调用一次foo,表示又有一个新的 num = 123 创建出来了

在函数内的数据，不能直接在函数外被访问，那么在函数内如果定义一个函数，那么在这个函数内部是可以直接访问的

function foo() {
	var num = Math.random();
	funciton func() {
		return num;
		//通过调用func函数想获得几次数据就获得几次数据
		//但是函数只能在函数内访问，所以通过return将func return出去
	}
	return func;
}
var f = foo();
//f可以直接访问num 
var res1 = f();
var res2 = f();
//因为foo不再被调用，里面的num就不会变

闭包

1、如何获得超过一个数据

function foo() {
	var num1 = Math.ranfom();
	var num2 = Math.ranfom();
}

一般闭包的问题就是想办法间接地获得函数内数据的使用权，那么我们可以总结出一个基本的使用模型
1、写一个函数，函数内定义一个新函数，返回新函数，用新函数获取函数内的数据

function foo() {
		var num1 = Math.random();
		var num2 = Math.random();
		//用对象来打包可以给函数加上名字
		return {
				num1: function(){
					return num1;
				},
				num2: function(){
					return num2;
				}
		}
	}
	var o = foo();
	var num1 = o.num1();
	var num2 = o.num2();
	console.log( num1 + '\n' + num2 );

2、写一个函数，函数内定义一个对象，对象中绑定多个函数，返回对象，利用对象的方法返回函数内的数据

function foo1() {
		var num = Math.random();
		return {
			get_num: function () {
				return num;
			},
			set_num: function ( value ) {
				num = value;
			}
		}
	}
	var o1 = foo1();
	var num = o1.get_num();
	console.log( num );

	num = o1.get_num();
	console.log( num );

	num = o1.get_num();
	console.log( num );

	o1.set_num( 123 );

	num = o1.get_num();
	console.log( num );

闭包的基本用法

闭包是为了实现具有私有访问空间函数的
1、带有私有访问数据的对象

function Person(){
	this.name = '张三';
	
}
//所谓的私有数据就是指只有函数内部可以访问的数据，或对象内部的方法可以访问的数据
//最简单的实现方式
function createPerson() {
	var __name__ = "";
	return{
		get_name: function(){
			return __name__;
		},
		set_name: function( value ){
			//如果不姓张就报错
			if( value.charAt( 0 ) === '张' ) {
				__name__ = value;
			}else {
				throw new Error( '姓氏不对，不能取名' );
			}
		}
	};
}

2、带有私有数据的函数

var foo = (function(){
	//私有数据
	return function(){
		//可以使用私有数据
	};
})();

闭包的效率问题

函数执行需要内存，函数中定义的变量会在函数执行结束后自动回收。凡是因为闭包结构被引出的数据，如果还有变量在引用这些数据的话，这些数据就不会被回收。
因此在使用闭包的时候，如果不使用某些数据了，一定要赋值为空

var f = (function(){
	var num = 123;
	return function(){
		return num;
	};
})();
//f 引用着函数，函数引用变量 num，因此在不使用该数据的时候，最好写上 
f = null;