作用域是指一个变量的作用范围,在JS中一共有两种作用域:全局作用域和函数作用域(整体与局部的关系)。

全局作用域

  • 直接编写在script标签中的Js代码都是全局作用域
    例:
<script type="text/javascript">
	var a = 1;
	var b = 2;
	var c = 3;
</script>

例子中变量a、b、c都是全局作用域

  • 全局作用域在页面打开时创建,在页面关闭时销毁
  • 在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用。
    例1:
<script type="text/javascript">
	console.log(window);
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_css


我们会发现它确实存在一个window对象,那么我们怎么使用window对象呢?

例2:

<script type="text/javascript">
	var a = 123;
	console.log(window.a);
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_javascript的全局作用域_02

  • 在全局作用域中,创建的变量都会作为window对象的属性保存(例如上面的例2)。创建的函数都会作为window对象的方法保存)如下例3所示。
    例3:
<script type="text/javascript">
	window.alert("hello")
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_前端_03

  • 全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到。

函数作用域

  1. 全局作用域相当于是一个大的整体,而函数作用域相当于是大的整体里面的小的部分。调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁。
  2. 每调用一次函数就会创建一个新的函数作用域,他们之间时相互独立的(例如我调用了3个函数,相当于有三个函数作用域,他们三个是相互独立的)。
  3. 在函数作用域中,可以访问到全局作用域的变量(全局变量就是在任何位置都可以访问到)。
    例1:
<script type="text/javascript">
	var a = 10;
	function fun() {
		console.log("a = " + a );
	}
	fun();
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_javascript的全局作用域_04

  1. 在全局作用域中无法访问到函数作用域的变量
    例2:
<script type="text/javascript">
	var a = 10;
	function fun() {
		var b = 20;
		console.log("a = " + a );
	}
	fun();
	console.log("b = " + b);
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_css_05

  1. 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找(就近原则),直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError(引用错误)。

例3:

<script type="text/javascript">
	var a = 10;
	function fun() {
		var a = "我是函数里面的a";
		console.log("a = " + a );
	}
	fun();
	console.log("a = " + a );
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_javascript的全局作用域_06


例4:

<script type="text/javascript">
	var a = 10;
	function fun() {
		var a = "我是fun函数里面的a";
		function fun2(){
			console.log("a = " + a);
		}
		fun2();
	}
	fun();
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_前端_07


如果将var a = “我是fun函数里面的a”;注释,则输出的是a = 10;因为在调用函数fun2();时,自身的作用域中没有变量a,于是往上一级函数fun();找,也没有变量a,于是再往上一级找,则找到全局作用域中的变量a = 10;则输出。

  1. 在函数中要访问全局变量可以使用window对象。
    例5:
<script type="text/javascript">
	var a = 10;
	function fun() {
		var a = "我是fun函数里面的a";
		function fun2(){
			console.log("a = " + window.a);
		}
		fun2();
	}
	fun();
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_javascript_08

  1. 在函数作用域中也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行前被声明(声明提前大家不太熟悉或者忘记的可以看一下我的前一篇博客JS中变量的声明提前和函数的声明提前)函数声明也会在函数中所有的代码之前执行.
  • 在函数中,不使用var声明的变量都会变成为全局变量。
    例6:
<script type="text/javascript">
	var a = 30;
	function fun() {
		a = 20;
		b = 100;//相当于window.d = 100;是一个全局变量
	}
	fun(); 
	console.log("a = " + a);
	console.log("b = " + b);
</script>

运行结果:

javascript的全局作用域 javascript的全局函数_javascript_09

  1. 定义形参就相当于在函数作用域中声明了变量

今天的内容有点多,但是比较详细~大家要耐心的看完噢,如果有错的地方欢迎大家指出噢!