JavaScript:从内存的角度图解 函数作用域及作用域链

一、作用域 (scope):一个变量的使用范围

(1)全局作用域:既是指全局变量,其特点是可反复使用,缺点是使用不当极易造成全局污染。
(2)函数作用域:既是指局部变量,其特点是只在函数体内部有效,函数调用结束,该变量生命周期也随之结束。缺点是不可反复使用。

二、函数作用域下的函数生命周期

以下代码为例:

	var a;
	function fun(){
		function text(){
			// to much coding
		}
		text();	
	}
	fun();
(1)函数开始执行前,创建执行环境栈(ECS)调用主函数(main()),主函数创建全局作用的对象window。

这是开始执行前的环境
JavaScript:从内存的角度图解 函数作用域及作用域链_第1张图片

(2) window 预编译(全局作用域)

JavaScript:从内存的角度图解 函数作用域及作用域链_第2张图片

(3)window内的函数开始执行

① fun 函数定义:创建函数对象(这里首先被window已声明的函数是fun),fun指向引用函数对象,函数对象的scope属性引用回创建函数时的作用域(这里的fun函数对象引用回的是window)
JavaScript:从内存的角度图解 函数作用域及作用域链_第3张图片
② fun 函数调用:声明及引用完毕,程序执行到 fun( )时,既是 fun( ) 被调用,这意味着ECS中将开辟一个新的元素(新的函数执行环境)fun( ) ,fun( ) 随即创建一个属于自己的活动对象(AO),并指向该活动对象,该活动对象中存储的则是fun( )中的局部变量或新的函数体(这里是fun( )的内部函数text( )),活动对象中的parent属性引用函数的scope属性指向父级作用域(这里即是window)。
JavaScript:从内存的角度图解 函数作用域及作用域链_第4张图片
③ text 函数定义:和 ① 类似,这里的text指向引用函数对象,函数对象的scope属性引用回创建函数时的作用域(既是 fun)
JavaScript:从内存的角度图解 函数作用域及作用域链_第5张图片
④ text 函数调用:同上 ② 类似,程序执行到 text( )时,既 test( ) 被调用 ,test( ) 随即创建一个属于自己的活动对象(AO),并指向该活动对象,活动对象中的parent属性引用函数的scope属性指向父级作用域(这里即是fun:AO)。
JavaScript:从内存的角度图解 函数作用域及作用域链_第6张图片

(4)window内的函数调用结束

函数执行完毕接下来即是出栈操作,释放活动对象,释放活动对象中的局部变量。也即是局部变量生命周期的结束。
JavaScript:从内存的角度图解 函数作用域及作用域链_第7张图片

三、作用域链

函数的作用域链是由多级作用域连续引用形成的链试效果,即是活动对象中的parent属性引用函数的scope属性指向父级作用域,引用顺序:先在局部找,局部没有则沿作用域链向父级作用域中寻找。

scope chain
  1. 每个函数在定义时(函数声明/函数表达式)时会拷贝其父亲函数的作用域链
  2. 在函数调用(运行)时,生成AO然后将AO压入作用域链的栈顶
    JavaScript:从内存的角度图解 函数作用域及作用域链_第8张图片

你可能感兴趣的:(JavaScript)