前端JS入门教程——JavaScript 作用域

爱前端-只专注全栈大前端，前端教育我们更专业！

在MDN或者其他权威教程上，对于作用域的解释无一例外是与可见性和生命周期相关。

作为最重要的概念之一，初学者往往会惑于上述高大上的理论阐述。

所以从浅显处入手，可能更有助于对于概念的入门和深入理解。

作用域通俗的讲就是变量或者函数的“势力范围”，在此范围内，变量可以被引用，函数可以被调用。

JavaScript具有两种作用域：

（1）.全局作用域。

（2）.函数作用域。

特别说明：ES2015新增块级作用域。

函数中声明的变量是局部变量，当然必须使用var声明，否则也是一个全局变量，代码如下:

`function` `func(){`

`var` `webName=``"爱前端(网页制作)"``;`

`address=``"全栈大前端"``;`

`}`

两个变量虽然都是在函数中声明，但webName是局部变量，address是全局变量。

全局变量在整个代码中都是可见的，局部变量仅能在声明变量的函数（包括嵌套在其中的函数）中使用。

再来看一段代码：

function func(){

var webName=``"爱前端（网页制作）"``;

function funcInner(){

var target=``"分享互助"``;

}

}

变量webName可以在函数func和funcInner中应用，但变量target只能够在funcInner中使用。

全局变量是window对象的属性，"势力范围"是整个代码。

代码实例如下：

var antzone=``"分享互助"``;

function func(){

var webName=``"爱前端"``;

}

console.log(window.antzone);

作用域链:

作用域链是查找一个变量的时候，一层一层的向上形成的查找轨迹，类似于一个链子一样。

代码实例如下:

var antzone=``"爱前端"``;

function box(){

var a=``"box函数"``;

function middle(){

var b=``"middle函数"``;

function inner(){

console.log(antzone);

}

inner();

}

middle();

}

box();

将要打印antzone时，首先会在当前inner函数作用域中查找，没有找到，则向上在middle函数作用域中查找，没有查找到，再向上在box中查找。依然没有查找到，最后在全局作用域中查找，这样就形成作用域链效果。

最后，给大家推荐一个前端学习进阶内推交流群137503198 前端资料分享，不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。