JavaScript执行环境及作用域

本文深入探讨JavaScript的执行环境与作用域链概念,解析函数与全局环境如何影响变量访问,以及通过with语句和try-catch块如何改变作用域链。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

执行环境

  • 执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。

  • 每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。

  • 在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的。

实例代码:

	//1、页面载入全局执行环境
	var color = "blue";
	
	function changecolor() {
		// 3、进入changecolor的执行环境
 		var anothercolor = "red";
		 function swapcolors() {
		 	//5、进入swapcolors的执行环境
		 	var tempcolor = anothercolor;
  			anothercolor = color;
  			color = tempcolor; 
		 }
		 
		//4、 执行swapcolors()
		 swapcolors();
	}
	//2、执行changecolor()
	changecolor();

各个函数的执行环境示意图如下
在这里插入图片描述

作用域

  • 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合

  • 变量在函数内声明,变量为局部作用域,只能在函数内部访问,函数执行完毕后即销毁。

  • 变量在函数外定义,即为全局变量,网页中所有脚本和函数均可使用,在页面关闭后销毁

  • 在 HTML 中, 全局变量是 window 对象,所有数据变量都属于 window 对象。

  • 与其他类c语言不同,JavaScript没有块级作用域,它使用函数作用域,例:

	//对于有块级作用域的语言来说,for语句初始化变量的表达式所定义的变量,只会存在与循环的环境之中
	//而对于JavaScript来说,由for语句创建的变量i即使在for循环执行结束后,也依旧会存在于循环内部的执行环境中,直到函数结束
	for(var i=0;i<10;i++){
		doSomething(i)
	}
	alert(i);

·

作用域链

  • 内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部变量环境中的任何变量和函数

  • 当代码在一个环境中执行时,都会创建一个作用域链。 作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

  • 在作用域最前端的是活动对象,而最后端是全局执行环境window(浏览器宿主中);变量访问原则是,根据作用域前端往上进行搜索,如果提前搜索到变量,则停止搜索
    在这里插入图片描述
    实例代码:

	//全局环境
	var color="blue";
	function changecolor(){
		//changecolor执行环境
 		var anothercolor="red";
 		function swapcolors(){
 			//swapcolors执行环境
 			var tempcolor=anothercolor;
 			anothercolor=color;
 			color=tempcolor;

			//这里能访问tempcolor,anothercolor,color
  		}
  		//这里能访问anothercolor,color,但不能访问tempcolor
 		swapcolors();
	}
	//这里只能访问color;
	changecolor();
 	

下图形象地展示了上面例子的作用域链,其中,内部环境可以通过作用域链访问所有外部环境,但外部环境不能访问内部环境中任何变量和函数。
在这里插入图片描述

·

延长作用域链

虽然执行环境的类型总共只有两种——全局和局部(函数)。但还是可以通过其他方法来延长作用域链。因为有些语句在作用域链的前端临时增加了一个变量对象,该变量对象会在代码执行后被移除。当执行流进入下列任一语句时,作用域链就会得到加长:

  • try-catch语句的catch块
  • with语句

with语句

with语句的作用是将代码的作用域设置到一个特定的作用域中

基本语法

with (expression) statement;

例子:

	var qs = location.search.substring(1);
	var hostName = location.hostname;
	var url = location.href;
	
	//这几行代码都是访问location对象中的属性,如果使用with关键字的话,可以简化代码
	with (location){
  		var qs = search.substring(1);
 		var hostName = hostname;
  		var url = href;
	}

在这段代码中,使用了with语句关联了location对象,这就以为着在with代码块内部,每个变量首先被认为是一个局部变量,如果局部变量与location对象的某个属性同名,则这个局部变量会指向location对象属性。

注意

在严格模式下不能使用with语句。

缺点

  1. 性能问题
  2. 语义不明,调试困难
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值