本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

苏南大叔想和大家来聊一聊前端经典面试题:letvar的区别。本以为这是个很简单的话题,但是在准备内容的过程中,苏南大叔发现,即使是最简单常见的var,这里都似乎有很大的文章可写。所以,你真的认识js中的var了么?请仔细心算一下本文的代码,看看和你想的一样不一样。

苏南大叔:JavaScript,js中的var作用域是如何生效的? - js-var
JavaScript,js中的var作用域是如何生效的?(图5-1)

本文是在win10下的chrome@89.0.4389.90浏览器里面测试相关代码的。大家肯定觉得这个话题很easy。但是,你真的了解var的作用域么?来仔细看看本文的例子。

varuse strict

早期的js中就只有个var,放到哪里都合适。放在顶层呢,就是个全局变量。放在函数里面呢,就是个局部变量。如果顶层和函数里面都放置了呢,就可能就是个值得讨论的问题了。

当然,对于变量定义来说,一般情况下,不写var关键词也是可以的。但是对于use strict的情况来说,不写var关键词可能是不行的。在严格模式下,没有定义过的变量是不能被使用的。所以,必须使用var或者let或者const等字样。

"use strict";
a="苏南大叔";

否则将会有下面的类似报错:

Uncaught ReferenceError: a is not defined

苏南大叔:JavaScript,js中的var作用域是如何生效的? - js-var-code-0
JavaScript,js中的var作用域是如何生效的?(图5-2)

但是,如果在use strict下,先使用,再定义也是可以的,这个是比较特殊的情况。例如,下面的代码是不会报错的。

"use strict";
a="苏南大叔";
var a="苏南大叔加油";

块儿级作用域内var可改变全局

下面使用了一个块级作用域{},结果内部的var改变了外部的var。代码如下:

"use strict";
var a="苏南大叔";
{
    console.log(a);
    var a="苏南大叔加油";
}
console.log(a);

结果如下图所示:

苏南大叔:JavaScript,js中的var作用域是如何生效的? - js-var-code-1
JavaScript,js中的var作用域是如何生效的?(图5-3)

函数作用域内var无法改变全局

函数内部,如果使用关键字重新定义了变量的话,则作用域是整个函数内部,并不会修改全局变量。(会波及变量定义之前的语句结果哦)

"use strict";
var a="苏南大叔";
(function(){
    console.log(a);
    var a="苏南大叔加油呀";
    console.log(a);
})();
console.log(a);

苏南大叔:JavaScript,js中的var作用域是如何生效的? - js-var-code-2
JavaScript,js中的var作用域是如何生效的?(图5-4)

但是,如果不使用关键词var的话,则可以改变全局的变量。

"use strict";
var a="苏南大叔";
(function(){
    console.log(a);
    a="苏南大叔加油呀";
    console.log(a);
})();
console.log(a);

运算结果如下图所示:

苏南大叔:JavaScript,js中的var作用域是如何生效的? - js-var-code-3
JavaScript,js中的var作用域是如何生效的?(图5-5)

相关链接

总结

本次实验中的代码是在目前最新的谷歌浏览器@89.0.4389.90上面实验的结果。后续文章请继续关注:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。