JS中作用域以及变量范围

港控/mmm° 2021-12-11 08:49 379阅读 0赞

## 变量作用域 ##

js作为一门脚本语言，他与c，java这些语言是不相同的。

### 全局变量 ###

在js中声明全局变量，有下面几种方式：

**1.在函数外通过var来声明。**

var test ="hello";
    console.log(test);
    function a(){
        test="xx";
        console.log(test);
    }
    a();
    console.log(test);

结果：

hello
    xx
    xx

这种方式通过声明的变量在任何地方都可进行修改和使用。

**2.在函数中隐士的声明变量**

function a(){
        test=22;
        console.log(test);
    }
    a();
    console.log(test);

结果：

22
    22

**因为js是弱类型脚本语言，在使用之前无需定义，所以可以通过这种方式也能声明全局变量。**

来看一个反例：

var test="aa";
    console.log(test);
    function a(test){
        test=22;
        console.log(test);
    }
    a(test);
    console.log(test);

结果：

aa
    22
    aa

可以看到在函数中修改了test值可是第二次在函数外打印的值没有变。这是因为在函数的过程中只是进行了值传递。局部变量覆盖掉了全局变量，只是局部变量 在 修改。

**因为在函数的参数内定义的变量并不是全局变量。**

反例二：

function a(){
        var test="aa";
        console.log(test);
    }
    a();
    console.log(test);

aa
    notdefine

在函数内通过var来声明的变量是局部变量，函数外无法访问。

### 变量作用域 ###

js的作用域和c与java这些语言的作用域也不相同，骚小孩在以前经常会因为这个而头疼，后来在认真学习了以后才懂了。

**1.js中没有块范围。**

if(1!=1){
        var y=c;
    }
    console.log(y)
    
    if(1==1){
        var x=a;
    }
    console.log(x);

结果：

undefine
    a

可以看到在if代码块定义的两个变量，在if块之外去打印，如果判断成功的话，才会去执行里边的声明语句，声明语句执行了，那么在代码块外边就可访问到了。

**也可以看出在代码块中声明的变量也是全局变量**。

**2.js中的全局变量都会成为window的属性**

var x=0;
    console.log(window.x);

结果：

**3.变量提升**

var c=0;
    function a(){
        console.log(c);
    }
    a();

结果：

var c=0;
    function a(){
        console.log(c);
        var c=11;
    }
    a();

结果：

undefine

可以看出在函数中加了一行声明语句结果就会不同，这产生这样的原因是什么呢？

其实第二个代码块的执行顺序是这样的：

var c=0;
    function a(){
        var c;
        console.log(c);
        c=11;
    }
    a();

**在函数中他会先把声明语句提升到第一行**，**但是并不提升赋值**。然后局部变量覆盖全局变量，在打印c的时候局部变量还没来的

及赋值所以就是undefine。

变量提升不只会提升会执行的变量，不会执行的变量也会进行提升：

var c=10;
    function a(){
        console.log(c);
        if(false) {
            var c = 10;
        }
    }
    a();

结果：

undefine

因为在if判断中定义了局部变量c，**虽然if条件不成立，但是也会进行变量提升**，所以打印c也是undefine；

**4.let变量**

通过上面的例子可以看到用var来定义变量的弊端：

**1.var定义的变量没有块作用域；**

**2.var定义的全局变量会自动添加全局window对象的属性；**

**3.var变量会提前装载（变量提升）；**

let就是为了解决这些问题而诞生的。

for(let i=0;i<5;i++){
        
    }
    console.log(i);

结果：

报错

**在代码块中定义了let变量，在外部引用的时候不会存在。即存在块作用域。**

let i=10;
    console.log(window.i);

结果：

undefine

**let声明的变量并不会成为window的属性。**

var c=10;
    function a(){
        console.log(c);
        let c=1;
        console.log(c);
    }
    a();

在函数中存在变量与全局变量名相同的c，因此会覆盖掉全局变量c，但是由于let不会提前装载，所以在第一个打印语句打印c时会报错。

JS中作用域以及变量范围

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JS变量作用域

相关 js变量的作用范围

相关 JS中变量的作用域

相关 js作用域（函数作用域、变量作用域、作用域链、with语句）

相关 Js变量作用域与作用域链详解

相关 JS名字空间以及局部变量的作用域

相关 JavaScript-JS变量作用域

相关 js变量以及其作用域详解

相关函数中变量的作用域以及变量提升

相关 JS中作用域以及变量范围