什么是作用域
作用:生效,可以使用
域:范围
一个变量(变量名,函数名)可以生效的范围
作用域分类
-
全局作用域
一个html页面就是一个全局作用域
打开页面的时候,作用域就生成了,知道关闭页面为止 -
局部作用域
只有函数生成私有作用域
每一个函数就是一个私有作用域
作用域的上下级关系
全局作用域最大,所有的私有作用域都是在全局作用域下面的
函数生成的私有作用域,函数写在哪个作用域里面,就是哪个作用域的子级
<body>
<script>
//这个位置就是全局作用域
function fn() {
//这个位置就是 全局作用域下 fn函数的子级作用域
function fun() {
//这个位置就是 全局作用域下 fn函数私有作用域下的 fun函数的私有作用域
}
}
</script>
<body>
变量 定义/使用/赋值 概念
- 定义
有var关键字
或者function 函数名(){}
var a = 10;
function fn(){}
- 使用
就是当你需要拿到一个变量的值去使用的时候
var a = 10;
console.log(a); //我要使用a的值去打印出来
a+1 //我要使用a的值去和1进行运算
var b = a; //我要使用a的值赋值给b
- 赋值
给一个变量进行赋值的操作
var a = 10; //要把10赋值给a这个变量
var b = function(){} //要这个函数赋值给b这个变量
作用域的三大规则
- 变量定义规则
当你在定义一个变量的时候
你把这个变量定义在哪个作用域里面
就只有这个作用域及其后代作用域可以使用
当前作用域的所有祖先级作用域不能使用
var a = 100//全局作用域里面的变量 a
function fn() {
var b = 200 // fn 私有作用域里面的变量 b
function fun() {
var c = 300 // fun 私有作用域里面的变量 c
}
}
- 变量使用规则
当你需要使用一个变量的时候
首先, 在自己作用域内部查找, 如果有, 就直接使用, 停止查找
如果没有, 就去上一级作用域查找, 有就使用, 停止查找
如果还没有, 就再去上一级作用域查找, 有就使用, 停止查找
直到全局作用域都没有, 那么就报错 “变量 is not defined”
var a = 10;
function fn(){
var a = 20;
function fun() {
var a = 30;
var b = 200;
console.log(a) //结果为30
}
console.log(a);//结果为20
console.log(b);//报错 "b is not defined",因为b是fun函数局部变量
}
console.log(a);//结果为10
- 变量赋值规则
当你需要给一个变量赋值的时候
先在自己作用域内部查找, 如果有, 就给自己作用域内部的变量赋值
如果没有, 就向上一级查找, 如果有就给父级的变量赋值
如果还没有, 就继续向上查找
直到全局作用域都没有, 那么就把这个变量定义为全局变量, 再进行赋值
var a = 10; // 全局变量a
var b = 20; //全局变量b
function fn() {
var a = 100 ;//声明fn私有变量a
b = 200;//没有var关键字声明,等于给全局变量b重新赋值
console.log(a);//输出100
console.log(b);//输出200
}
fn(); // 因为fn函数的执行, 给全局变量b重新进行了赋值操作
console.log(a);//输出10
console.log(b);//输出200
作用域小案例
案例1
var a = b = 10;
console.log(a); //10
console.log(b); //10
代码解析
var a = b = 10
实际上是三个部分
- var a
- a = b
- b = 10
等于号(赋值) 的规则是从右往左
1.预解析
var a
2.代码执行的时候
b = 10 //标准的变量赋值操作, 根据变量赋值规则, 会把 b 定义成全局变量再赋值
案例2
var a = b;//这一步会报错
b = 20;
a = 10;
console.log(a);
console.log(b);
-
预解析
var a
在浏览器里面声明了一个 a 变量可以使用 -
代码执行
b = 20 // 对于变量 b 来说是变量的赋值
a = b // 对于变量 b 来说, 是变量的使用, 报错了, 后面就没有代码了
案例3
function fn() {
a = 100; // 这个fn里面没有用var定义a变量, a变成全局变量并赋值
console.log(a); //100
}
fn();
console.log(a); //100
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
