🔥JavaScript作用域和变量提升,你真的会了么?(一)

376 阅读3分钟

image.png


这是我参与8月更文挑战的第11天,活动详情查看:8月更文挑战


说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)

作者:小只前端攻城狮、 主页:小只前端攻城狮的主页、 来源:掘金

GitHub:P-J27、 CSDN:PJ想做前端攻城狮

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


作用域(Scope)的概念

  • 概念:通俗来讲,作用域是一个变量或函数的作用范围。作用域在函数定义时,就已经确定了。
  • 目的:为了提高程序的可靠性,同时减少命名冲突。

作用域的分类

在 JS 中,一共有两种作用域:(ES6增加块级作用域

  • 全局作用域:作用于整个 script 标签内部,或者作用域一个独立的 JS 文件。
  • 函数作用域(局部作用域):作用于函数内的代码环境。

作用域的访问关系

在内部作用域中可以访问到外部作用域的变量,在外部作用域中无法访问到内部作用域的变量。(内可访外,外不可访内)

var a = 'aaa';
function foo() {
    var b = 'bbb';
    console.log(a); 
  // 打印结果:aaa。说明 内层作用域 可以访问 外层作用域 里的变量
  //依靠的作用域链去查找,后面会讲作用域链
}
console.log(b); 
// 报错:Uncaught ReferenceError: b is not defined。
// 说明 外层作用域 无法访问 内层作用域 里的变量

想要了解作用域和作用域链的关系可以看这一篇文章,直接点击我


变量的作用域

根据作用域的不同,变量可以分为两类:全局变量、局部变量。

全局变量

  • 在全局作用域下声明的变量,叫「全局变量」。在全局作用域的任何一地方,都可以访问这个变量。
  • 全局作用域下,使用 var 声明的变量是全局变量
  • 在任何作用域下,未声明就直接使用的变量也会被挂在window对象下,作为全局变量,但不推荐这样使用。

局部变量

  • 定义在函数作用域的变量,叫「局部变量」。
  • 在函数内部,使用 var 声明的变量是局部变量。
  • 函数的形参也是属于局部变量。

从执行效率来看全局变量和局部变量:

  • 全局变量:只有浏览器关闭时才会被销毁,比较占内存。
  • 局部变量:当其所在的代码块运行结束后,就会被销毁,比较节约内存空间。

作用域的上下级关系

当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用( 就近原则)。如果没有则向上一级作用域中寻找,直到找到全局作用域;如果全局作用域中依然没有找到,则会报错 ReferenceError。

在函数中要访问全局变量可以使用window对象。(比如说,全局作用域和函数作用域都定义了变量a,如果想访问全局变量,可以使用window.a

其实也就是作用域和作用域链的关系,想要了解作用域和作用域链的关系可以看这一篇文章,直接点击我


感谢阅读,希望能对你有所帮助,文章若有错误或者侵权,可以在评论区留言或在我的主页添加公众号联系我。

写作不易,如果觉得不错,可以「点赞」+「评论」 谢谢支持❤