深入理解JavaScript作用域

前言

对于许多新手开发者来说，作用域的概念并不是很容易理解。这个东西也是面试中会比较常问的问题。这篇文章来为大家说一下作用域。

作用域

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
换句话说作用域决定了代码区块中变量和其他资源的可见性

让我们先来看个例子

function fn() {
	var variable = "内部变量";
}
fn();//先执行函数
console.log(variable);//报错 variable is not defined

 

这里我们就可以看出作用域的概念，变量 variable 在函数 fn 内部声明，全局作用域没有声明，所以在全局作用域下访问 variable 会报错。

我们也可以这样理解：作用域就是一个独立的区域，让变量不在泄露出去。它最大的作用就是隔离变量，使其不会受到污染

在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

var a=20;
function fn(){
    var sum=0;
    console.log(a);//20   局部访问全局
}
fn()//先执行
console.log(sum)//报错  全局访问局部

 

上面这个例子我们可以看到作用域的特点：局部可以访问全局的变量，但全局不能访问局部的变量

1、全局作用域

全局作用域在任何地方都可以进行访问，函数的外面叫做全局作用域（不包括函数嵌套）

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：

var sum = "全局变量"; //最外层变量
function fn() { //最外层函数
    var num = "局部变量";
    function Fun() { //内层函数
        alert('内层访问全局 '+ sum);
    }
    Fun();
}
alert('外层访问全局 ' + sum); //我是最外层变量
fn(); //内层变量
alert('外层访问局部 ' + num); //num is not defined
Fun(); //Fun is not defined

 

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

function outFun2() {
    num = "未定义直接赋值的变量";
    var sun = "局部变量";
}
outFun2();//先执行函数
alert(num); //未定义直接赋值的变量
alert(sun); //sun is not defined

（3）所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

全局作用域有个严重的弊端：如果我们写了很多行 JS 代码，变量定义都定义在全局作用域中。这样就会 污染全局命名空间, 容易引起命名冲突。造成变量污染

// a 写的代码
var num = 12;

// b 写的代码
var num = 10;

alert(num)// 10

2、局部作用域

局部作用域又叫做函数作用域，是指声明在函数内部的变量。和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部。

function fn(){
    var num="局部变量";
    function Fun(){
        alert('内层访问局部 ' + num);//局部访问局部
    }
    Fun();
}
fn()
alert('外层访问局部 ' + num)

 

总结：

作用域特点：局部可以访问全局的变量，但全局不能访问局部的变量
全局作用域：在任何地方都可以进行访问，函数的外面叫做全局作用域（不包括函数嵌套）
局部作用域：函数内部的变量，只能在局部访问