视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
细说JavaScript中的作用域与变量
2020-11-27 20:00:51 责编:小采
文档
 本篇文章讲述了JavaScript中的作用域与变量,大家对JavaScript中的作用域与变量不了解的话或者对JavaScript中的作用域与变量感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧

变量作用域

作用域:就是变量声明的区域,也是变量和函数的可访问范围。在全局声明的变量为全局可见可访问的就是全局变量,如果在函数内部声明的变量只能在函数内部可访问,可称为局部变量。

几个注意点:

1.JavaScript中没有块级作用域(在ES5和ES6之前),只有函数作用域和全局作用域。for循环内部定义的变量是函数级别的作用域。

2.变量没有在函数内声明或者声明的时候没有带var就是全局变量,拥有全局作用域。特殊:var a = b = c = 0; b与c是全局变量。

3.变量的作用域是以它声明时为准的,因为变量的作用域在js代码的解析阶段就已经完成规则的制定。

简单案例:

	//变量的作用域
	var t = 90; //全局作用域,在js代码中任何一个地方都可以访问

	function f1(){ //f1函数 在全局作用域中

	var t2 = 10; //t2是f1函数内部变量,只有在f1内可访问
	console.log(t2);

	function f2(){ //f2函数 在f1函数的作用域中
	var t3 = 20;//只能在f2函数内部才能访问
	console.log(t3);
	return t2*t3; // 访问了父级作用域中的t3
	}
	return f2();

	}
	var m = f1();

	console.log(m);

2.没有块级作用域

前面我说到JavaScript中没有块级作用域,这是对于es5 es6之前来说9(let const等)。for循环,while循环中定义的变量的作用域是函数级别的作用域。

例如:

	//没有块级作用域
	function f1(){
	for(var i=0;i<10;i++){//i变量是在for中定义的
	console.log(i);//打印1-9
	}
	console.log(i);//可以访问到i变量 打印10 而在c++ Java等语言中是不行的
	}

	f1();


3.变量提升 (hositing)

js引擎在执行js代码的时候,首先会先创建全局的EC(上下文)和函数的EC(如果有函数),在创建EC的时候已经把当前作

用域里面声明的变量初始化为undefined,怎么初始化呢?js引擎首先会在当前作用域去找var这个变量定义,发现有这个定义,那么就

把它提升到作用域的最前面,并且保存在内存中(即EC中的变量对象VO),设为undefined。

案例:

	var a = 10;

	function f1(){
	//在这里首先会创建f1的执行上下文 并把里面的变量初始化为undefined
	console.log(a); //代码执行到这里的时候, js引擎会去当前作用域内存中问有没有这个变量的声明,发现有,那么就给他初始的undefined

	//假如说下面没有var变量进行定义a,那么js就会向父级作用域中去找这个变量,直到找到为止

	var a = 19; //在这里给a赋值了19

	console.log(a); // 打印了19
	}

	f1();

	console.log(a); //这里无疑是10 没什么问题

所以,js引擎在创建上下文的时候,就会对有需要的变量进行变量提升,可以说是一种安全保护机制,ES6中对其进行了详细讨论。

注意:当变量声明和函数声明 为同一个名字的时候,函数的优先级高。

	console.log(b); //打印b(){}

	var b = 9;

	function b(){

	}

	console.log(b); //打印9


由于函数被提升到最前面,那么一开始打印的无疑是b(){} ,因为js是动态语言,把b重新赋值为9,覆盖掉之前的function。

案例一:

	if ("a" in window) {
	var a = 1;
	}
	console.log(a);


首先看到你段代码,你的答案是什么?会不会是Uncaught ReferenceError: a is not defined?

告诉你,答案是1

首先,你要清楚var a = 1其实是定义了一个全局变量(属于window对象下的属性),因为if并不是块作用域,JavaScript中es5之前没有块作用域。所以这个条件判断是成立的。

再来看:

	if (!("a" in window)) {
	var a = 1;
	}
	console.log(a);


那么这个应该是什么呢?答案是undefined,因为条件不成立,没有给a赋值成功,默认为undefined

案例二:

	fun();

	console.log(a);
	console.log(b);
	console.log(c);

	function fun(){
	var a = b = c = 10;
	console.log("fun中的a="+a);
	console.log("fun中的b="+b);
	console.log("fun中的c="+c);
	}

你得答案是什么?

答案是:

由于a没有定义,所以直接报错,下面的两行代码被阻止执行了,假如把外面的console.log(a)注释掉呢?

	fun();

	//console.log(a);
	console.log(b);
	console.log(c);

	function fun(){
	var a = b = c = 10;
	console.log("fun中的a="+a);
	console.log("fun中的b="+b);
	console.log("fun中的c="+c);
	}

输出的是:


为什么外面b c都会是10呢? 原因就是var a = b = c = 10 ;其中b c就是全局变量,如果你想定义三个内部变量,那么应该这样定义:

var a = 10 ,b = 10, c = 10;

弄懂了以上这些区别,基本上变量提升就没什么大问题了。

下载本文
显示全文
专题