ES6的变量声明

本是古典何须时尚 2021-09-16 01:22 454阅读 0赞

在ES5中，变量声明只有var和function以及隐式声明三种，在ES6中则增加了let，const,import和class四种，以下来介绍着七种变量的声明。

## var ##

--------------------

ES5中最原始的变量声明，用于声明变量，其实JavaScript是弱类型语言，对数据类型变量要求不太严格，所以不必声明每一个变量的类型（这就是下面说的隐式声明，当然这并不是一个好习惯），在使用变量之前先进行声明是一种好的习惯。

**1.作用域**

使用var声明的变量的作用域是函数作用域（在ES5时代，只有函数作用域和全局作用域两种作用域），在一个函数内用var声明的变量，则只在这个函数内有效。

function test(){
        var a;
        console.log(a);//undefined
    }
    console.log(a);//ReferenceError: a is not defined

**2.变量声明提升**

用var声明变量时，只要在一个函数作用域内，无论在什么地方声明变量，都会把变量的声明提升到函数作用域的最前头，所以无论使用变量在变量声明前还是声明后，都不会报错（当然只是声明提前，赋值并没有提前，所以如果使用在声明之前，会输出undefined，但不会报错）。

function test(){
        console.log(a);//undefined
        var a=3;
    }

## 隐式声明 ##

--------------------

当没有声明，直接给变量赋值时，会隐式地给变量声明，此时这个变量作为全局变量存在。

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

当然要注意，隐式声明的话就没有变量声明提前的功能了，所以下面的使用是会报错的。

function test(){
        console.log(a);//ReferenceError: a is not defined
        a=3;
    }

## function ##

--------------------

用function声明的是函数对象，作用域与var一样，是函数作用域。

function test(){
        function a(){
            console.log('d');
        }
        a();//'d'
    }
    a();//ReferenceError: a is not defined

同样，function声明也有变量声明提升，下面是两个特殊的例子：

这里有涉及到函数中形参的声明，我们可以将以上两个例子看成：

可以看到函数对象的声明也提前了，但是在形参变量声明之后（形参的变量声明在所有声明之前）。

当函数对象和普通对象同时声明时，函数对象的声明提前在普通对象之后。

function test(){    
        console.log(a);//[Function: a]
        function a(){}
        var a;
        console.log(a);//[Function: a]
    }

## let ##

--------------------

ES6新增的声明变量的关键字，与var类似。

当然，与var也有很大区别：

**1.作用域不同**

let声明的变量的作用域是块级作用域（之前的js并没有块级作用域，只有函数作用域和全局作用域），var声明的变量的作用域是函数作用域。

{
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1

**2.不存在变量声明提升**

用var声明变量时，只要在一个函数作用域内，无论在什么地方声明变量，都会把变量的声明提升到函数作用域的最前头，所以无论使用变量在变量声明前还是声明后，都不会报错。而let不一样，与java以及其他语言一样，let声明的变量，在未声明之前变量是不存在的。（js的语法越来越向java靠拢）

console.log(a); // undefined,但是不报错。
    console.log(b); // ReferenceError: b is not defined.
    
    var a = 2;
    let b = 2;

注意：在使用babel时可能会遇到这样的情况：

console.log(b); //undefined
    let b = 2;

ES6的变量声明

发表评论取消回复

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

相关阅读

相关 ES6系列之变量声明

相关 ES6笔记一----认识ES6、let变量声明和特性总结

相关 ES6 (一) 变量声明

相关 ES6 let 声明变量和旧的var声明变量的区别

相关【ES6 教程】01—新的ES6语法：JavaScript let 声明块作用域变量

相关 ES6 声明变量结构赋值小坑

相关 ES6定义（声明）变量

相关 es6中新增的let、const变量声明

相关 ECMAScript 6 入门——ES6 声明变量的六种方法

相关 ES6的变量声明