作用域
作用域指的是代码的作用范围,按照作用域划分变量可分为全局变量和局部变量;作用域可分为:
全局作用域:
指全局变量作用的范围;全局变量指的是通过var在函数外面声明的变量,在js中任何位置都可以使用;但是在函数中通过var定义的变量,在函数外面是不可以使用的,也是局部变量;如果页面不关闭,内存就一直被占用,不能被 delete删除。
<script>
var num = 10;
console.log(num); //10
delete num;
</script>
<script>
console.log(num); //10
</script>
局部作用局:
指局部变量的作用范围。局部变量指在函数中申明的变量,函数外面是不能访问到的,当函数执行完后,内存就会被释放。
<script>
function f1() {
var str = '函数中的字符串';
console.log(str);
};
f1(); //函数中的字符串
console.log('函数外面调用局部变量:' + str); //Uncaught ReferenceError: str is not defined at test.html:18
</script>
隐式全局变量:
指的是不通过关键字声明的变量,函数中的隐式全局变量在外面也是能访问到的,函数执行完,内存不会释放;可以被delete删除,隐式全局变量在变量出现前使用会报错。
<script>
function f1() {
str = '函数中的字符串';
// delete str;//可以被删除
console.log(str);
};
f1(); //函数中的字符串
console.log('函数外面调用局部变量:' + str); //函数外面调用局部变量:函数中的字符串
console.log(b); //报错
function f1() {
b = 5;
};
f1();
console.log(b); //5,如果函数不调用还是会报错
</script>
块级作用域:
指一对{ }里面区域,块级作用域里面声明的变量只能在这个块级作用域使用,但是es5js中没有块级作用域,es6中有块级作用域因此js中在{}里面定义的变量在外面任然可以使用,函数除外。
<script>
if (true) {
var num = 10;
};
console.log(num); //10
for (var i = 0; i < 3; i++) {
var str = '哈喽';
};
console.log(str); //哈喽
</script>
作用域链:
指当前作用的代码会在当前作用域先找变量,如果没有会一级一级往上找,如果0级作用域也没有会报错。
<script>
//0级作用域:
var num = 10;
function f1() {
//1级作用域:
var num = 9;
function f2() {
//2级作用域:
// var num = 8;
function f3() {
//3级作用域:
// var num = 7;
console.log(num); //9
};
f3();
};
f2();
};
f1();
</script>
预解析:
预解析(提前解析代码)指:javascript解析器在解析javascript代码时,把变量的声明提前到当前作用域的最上面(注意函数表达式也算是变量)和函数的声明提前到当前作用域的函数调用之前。
<script>
console.log(num); //undefined,预解析代码如下:
var num = 5;
// 预解析代码:
var num;
console.log(num);
num = 5;
f1();
var num = 10;
function f1() {
console.log(num); //undefined
var num = 5;
};
// 预解析代码:
var num;
function f1() {
var num;
console.log(num); //undefined
num = 5;
};
f1();
num = 10;
f1();
console.log(b); //5
console.log(c); //5
console.log(a); //报错
function f1() {
var a = b = c = 5;
console.log(a); // 5
console.log(b); // 5
console.log(c); // 5
};
//预解析代码:
function f1() {
var a;
a = 5;
b = 5;
c = 5;
console.log(a);
console.log(b);
console.log(c);
};
f1();
console.log(b);
console.log(c);
console.log(a);
console.log(f); //undefined
var f = function() {
var num = 5;
console.log(num);
};
// 解析代码如下:
var f;
console.log(f);
f = function() {
var num;
num = 5;
console.log(num);
};
</script>
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海