JavaScript 函数作用域(面试常考,还不来看)

一、作用域

用来教你怎么写代码

作用:生效,有用

域:范围,区域

作用域:变量(变量名,函数名)生效的范围

1. 全局作用域

全局作用域是最大的作用域,包含了局部作用域。在全局作用域中定义的变量可以在如何地方使用

  • 页面打开的时候,浏览器会自动给我们生成一个全局作用域 window
  • 这个作用域会一直存在,直到页面关闭才会销毁
//下面两个变量都是存在全局作用域下面的,都是可以在任意地方使用的
var num1 = 100;
var num2 = 200;


2. 局部作用域

局部作用域就是在全局作用域下面,开辟出来的一个相对小一些的作用域。 在局部作用域中定义的变量只能在这个局部作用域内部使用

  • 在 js 中只有函数能生成一个局部作用域,别的不行
  • 每一个函数,都是一个局部作用域
// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100;

function fn(){
	//下面这个变量就是一个 fn 局部作用域内部的变量
	//只能在 fn 函数内部使用
	var num2 = 200;
}
fn();


二、作用域上下级

  • 有了作用域以后,变量就有了使用范围,也就有了使用规则

1. 变量定义机制

  • 一个变量(函数)
  • 定义在哪一个作用域里面
  • 只能在当前作用域或下级作用域里使用
  • 上一级作用域不能使用

// 全局作用域下的 a

var a = 100;
function fn(){
	// 局部作用域下的 b
	var b = 200;
}
fn();
console.log(a);	// 100
console.log(b);	// 报错:b is not defined


2. 变量使用机制

  • 当你需要使用一个变量(函数)
  1. 首先,在自己的作用域内部查找,如果有,就直接拿来使用
  2. 如果没有,就去上一级作用域查找,如果有,就拿来用
  3. 如果没有,就进行去上一级作用域查找,以此类推
  4. 如果一直到全局作用域 window 都没有这个变量,那么就会直接报错(该变量 is not defined)
var num = 100;

function fn(){
	var num2 = 200;
	function fun(){
		var num3 = 300;
		//自己fun函数作用域里面有,直接拿过来用
		console.log(num3);
		//自己作用域内没有,就去上一级,就是 fn 的作用域里面找,发现有,拿过来用
		console.log(num2);
		//自己这没有,去上一级 fn 那里也没有,再上一级到全局作用域,发现有,直接用
		console.log(num);
		// 自己没有,一级一级找上去到全局都没有,就会报错
		console.log(a);
	}
	fun();
}
fn();
  • 变量的使用机制也叫做作用域的查找机制
  • 作用域的查找机制只能是向上找,不能向下找
function fn(){
	var num = 100;
}
fn();

console.log(num); //发现自己作用域没有,自己身处全局作用域,就没有上一级了,直接报错


3. 变量赋值机制

  • 当你想给一个变量赋值的时候,那么就先要找到这个变量,在给他赋值
  • 变量赋值规则:
  1. 先在自己作用域内部查找,有就直接赋值
  2. 没有就去上一级作用域内部查找,有就直接赋值
  3. 在没有再去上一级作用域查找,有就直接赋值
  4. 如果一直找到全局作用域 window 都没有,那么就把这个变量定义为全局变量,在给他赋值(不会报错)
function fn(){
	// 声明私有变量 num ,只能在 fun 内部使用,fun 外面不能用
	var num1 = 100;
	console.log(num1);	// 100
}
fn();
console.log(num1);	// 报错


function fun(){
	// 声明私有变量 num ,只能在 fun 内部使用,fun 外面不能用
	num2 = 200;
	console.log(num2);	// 200
}
fun();
console.log(num2);	// 200


//  全局变量 num
var num;
function fn(){
	var num;
	function fun(){
		// 不声明,只赋值
		num = 100;
	}
	console.log(num);	// undefined
	fun();	// 这个函数执行完后,才给 fn 私有变量 num 赋值
	console.log(num);	// 100	
}
/*fun 调用以后,要给 num 赋值
查看自己的作用域内部没有 num 变量
就会向上一级查找,上一级 fn 有 num 变量
那么就会把 num 赋值给 fn 下的 num 变量
赋值后的 num,由于是 fn 的私有变量,所以不会再给全局变量的 num 赋值了
*/
console.log(num);	// undefined
fn();
console.log(num);	// undefined

三、作用域预解析讲解

全局预解析

  • 会在页面打开的时候就进行了
  • 只解析属于全局的内容
// 刚打开页面
var a = 100;	// 会被解析
function fn(){	// 会被解析
	var b = 200;// 不会被解析
}

局部预解析

  • 当函数执行的时候进行预解析
  • 函数内部的预解析,只属于函数内部
// 刚打开页面
var a = 100;	// 会被解析
function fn(){	// 会被解析
	var b = 200;// 等函数执行后,才会被解析
}
fn();	// 此时函数执行了,开始解析函数内部


形参与变量重名?

  • 函数执行的时候,会进行形参赋值
  • 函数执行的时候,会进行预解析
  • 一旦函数的形参和定义的私有变量重名
  • 先预解析还是先形参赋值?
var a = 100;	
function fn(b){	
	function b(){
		
	}
	b();
}
fn(200);	


如果预解析在前面,形参在后面
这个 fn 函数执行的时候,先把 b 解析成为一个 函数
然后再给 b 赋值为 200 ,那么就会报错了

如果预解析在后面,形参在前面
这个 fn 函数执行的时候,先把 b 赋值为一个 200
然后预解析的时候,把 b 赋值为 函数,就不会报错

结论:在函数执行的时候,先进行形参赋值,再进行预解析


四、作用域预解析案例

面试案例 1:

var a = b = 10;
a = 10;
b = 10;
console.log(a);	// 10
console.log(b);	// 10

代码分析:

预解析:
1. var a;
代码执行:
1. b = 20
	此时变量赋值时,当一直到 window 都没有 b 的时候,会把 b 定义为全局变量
2. a = b
	变量使用的是 b ,赋值的是 a
3. a = 10


面试案例 2:

var a = b;	// 在这里直接报错,程序中断
a = 10;
b = 10;
console.log(a);	// 程序早就中断,不执行
console.log(b);	// 程序早就中断,不执行

代码分析:

预解析:
1. var a;
代码执行:
2. a = b
	变量 使用 和 赋值
	使用的是 b:b 没有这个变量,所以直接报错
	赋值的是 a:

面试案例 3:

fn();
var fn = 100;
function fn(){
	fn = 200;
}
console.log(fn);	// 100

代码分析:

预解析:
1. var fn
2. function fn(){}
	预解析结束的时候,fn 是一个函数
代码执行:
3. fn()
	fn = 200
	给全局的 fn 赋值,赋值为200
4. fn = 100
	给全局的 fn 赋值,赋值为100
5. console.log(fn)
	100


面试案例 4:

fn();	// 把全局 fn 赋值为 200
fn();	// 把 200 当做一个函数来执行,报错
var fn = 100;
function fn(){
	fn = 200;
}
console.log(fn);	// 程序早就中断,不执行

面试案例 5:

function fn(){
	var num = 100;
	function fun(){
		var num = num;
		console.log(num);	// undefined
	}
	fun();
}
fn();

代码分析:

fum内部 预解析:
1. var num;
代码执行:
1. num = num;
	使用的时候,num 就是 undefined
	相当于给 num 变量,赋值为undefined

————————————————

原文链接: JavaScript 函数作用域(面试常考,还不来看)
作者:一颗不甘坠落的流星
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cj瑾瑜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值