通俗易懂理解ES6 - 变量声明命令及其块级作用域

栏目: JavaScript · 发布时间: 5年前

内容简介:万丈高楼平地起,欲练此功,必先打好基本功: )。ES6已经融入到了我们的日常开发当中,甚至一些ES7的特性也已经在普遍使用,但由于浏览器的支持问题,ES6的代码在大多数情况下,还是需要编译成ES5才能正常地在各浏览器上正常运行。 ES6支持6中形式的变量命名方式:在ES5里面,我们要声明一个变量,会通过三种命令方式来实现,

万丈高楼平地起,欲练此功,必先打好基本功: )。

ES6已经融入到了我们的日常开发当中,甚至一些ES7的特性也已经在普遍使用,但由于浏览器的支持问题,ES6的代码在大多数情况下,还是需要编译成ES5才能正常地在各浏览器上正常运行。 ES6支持6中形式的变量命名方式: varletconstfunctionclassfunction ,本文主要讨论的是 varletconstclassfunction 会在之后专门讨论。

变量声明

在ES5里面,我们要声明一个变量,会通过三种命令方式来实现, var隐式声明function

var a = 'test';     //var定义一个变量a,并赋值字符串'test';
b = 'test2';        //隐式声明,在堆变量b赋值字符串'test2'前,未以任何方式声明变量b,此时b为全局变量
function f() {
    cosole.log('haha');
}
复制代码

隐式声明声明变量是一个很不好的行为,隐式声明的变量类似于通过 var 定义一个变量,且变量的作用域直接指向window对象,这会导致变量容易被错误引用或修改

function f() {
    var fn = function() {
        (function() {
            b = '隐式声明的变量b';
        })();
    }
    fn();
}
f();
b;          //'隐式声明的变量b'
window.b;   //'隐式声明的变量b'
复制代码

ES6-变量声明的let和const

而在ES6中,变量声明增加了 letconst 两种形式,先看以下例子:

console.log(a);     //无报错,输出undefined
var a = 'test';
var a = 'var again';
复制代码

通过 var 声明的变量存在变量提升一说,同一变量名在相同作用域下能重复定义,上述代码执行时会以以下情形执行:先定义一个变量var a,console.log(a),a = 'test';

console.log(son);     //报错 Uncaught ReferenceError: son is not defined
let son = 'James Bond';
复制代码

let声明变量不存在变量提升,因此在son被定义前使用son的话,会报错

const name;            //报错 Uncaught SyntaxError: Missing initializer in const declaration
let education;              //正常执行
console.log(education);     //undefined

const name1 = 'human';
name1 = 'cat';         //报错 Uncaught TypeError: Assignment to constant variable.
复制代码

通过 const 定义的 nameobj 是一个常量,在声明时必须对其进行赋值,且赋值后不能进行二次赋值,而 let 声明的变量在声明时可不赋值,后面再赋值,此时默认值为 undefined

const obj = {};
obj;                //{}
obj.a = '1';
obj;                //{a:1}
复制代码

const 定义的 obj 在常量中存储的是obj对象在 里指向 的地址,该指向地址不可改变,而在 地址里面存放的数据不被约束,是可变的。若希望禁止变更obj及其内部属性,Object提供了freeze方法,如下函数能更好的递归冻结Object对象

const freezeObj = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach((item) => {
        if(type of(item) === 'object') freezeObj(item);
    });
}
复制代码
let fruit = 'orange';
var fruit = 'apple';    //报错 Uncaught SyntaxError: Identifier 'fruit' has already been declared
复制代码

通过let定义的变量在同一作用域下不允许被重复定义,否则会报错,const也是如此

var test = 'test',
    test1 = 'test1';
{
    test = 'new test';      //Uncaught ReferenceError: test is not defined
    test1 = 'new test1';    //Uncaught ReferenceError: test1 is not defined
    let test;
    const test1 = 'new test1';
}
复制代码

通过let、const声明的变量会存在 暂时性死区 ,即:在声明该变量的作用域内,变量已经被绑定在该作用域之中,忽略外界存在的同名变量,在该作用域下,该变量在变量声明之前都不能被使用。

变量声明结论

var:

  1. 存在变量提升,可重复多次声明同名变量。

let:

  1. 不存在变量提升,必须先定义再使用,否则报错;
  2. 同一作用域下不可重复定义同名变量,否则报错;
  3. 在代码块内,通过let声明的变量,尽管代码块外层有同名变量,代码块内部在该变量声明前都不能使用该变量,否则报错。

const:

=

letconst 的出现,很好地把ES5中 var 定义变量的Bug给埋了,解决了定义同名变量导致变量间相互污染的问题,保证了同一块级作用域下,变量名的唯一性。同时 const 定义常量能更直观地明白常量的意义及其不可修改性。

块级作用域

ES6新增的变量声明命令存在块级作用域

什么是块级作用域?

{
    var a = 'test';
    let b = 'test1';
}
console.log(a);     //test
console.log(b);     //Uncaught ReferenceError: b is not defined
复制代码

这便是块级作用域最基本的示例,通过 letconst 声明的变量仅能在其代码块内被使用,该代码块内部即是一个块级作用域

块级作用域有什么用?

var a = 'test';
function f(){
    console.log(a);
    if(true) {
        var a = 'test1';
    }
    console.log(a);
}
f();        //undefinded   test1
复制代码

这个例子输出的结果是 undefined ,原因在于,在 f() 中,不论 if 语句判断是否通过, if 内部的 var a 都被变量提升,且变量a均通过var命令声明,内部变量a覆盖了外部变量a;

换个写法再来一遍

let a = 'test';
function f(){
    console.log(a);
    if(true) {
        let a = 'test1';
    }
    console.log(a);
}
f();        //test   test
复制代码

比对一下两段代码的执行情况: 看看该代码的实际执行情况:

var a                               let a
a = 'test'                          a = 'test'
function f                          function f
f() = {}                            f() = {}
f()                                 f()
var a                               console.log(a);
console.log(a)                      if(true)
if(true)                            let a        //此处的a是另一个a,可以理解为_a,且_a的作用范围仅在if语句内
a = 'test1'                         a = 'test1';    //类似于_a = 'test1'
console.log(a)                      console.log(a)  //类似于console.log(_a)
复制代码

从上面的比对可以看出,通过let声明的变量a,不会被变量提升,且具有块级作用域,不会影响到上层作用域的a变量

再来一个示例:

for(var i=0;i<10;i++){
    console.log('for里面的i:'+i);          // 1、2、3......10
}
console.log(i);            //10
复制代码

这里定义的循环计数变量i,原本只是想在循环内使用,但由于使用了 var 声明,因此不存在块级作用域,导致 for 循环外也能获取到了i的值。

ES6中规定,函数本身的作用域在其所在的块级作用域当中。

function fn() {
    console.log('outside console');
}
(function() {
    if(false) {
        function fn() {
            console.log('inside console');
        }
    }
    fn();
}());
复制代码

上述代码中, fn() 执行结果会报错 fn is not a function ,因为在fn执行的环境中存在function fn的声明,声明被提前,导致fn被提前定义,但没有被赋值为function。

ES6的函数自执行代码得到精简。

//从
(function() {
    console.log('test');
})();

//变为

{
    console.log('test');
}
复制代码

块级作用域结论

通过使用 let const ,让变量存在了块级作用域,很好地划分变量间的作用范围,避免了以往同名变量相互污染问题;外层变量无法直接读取内层变量,对内层变量具有更好的保密性,内外层代码独立执行,相互间不影响;精简了函数自执行代码

以上。

文章观点内容如有错误欢迎指出交流,相互进步


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First WordPress

Head First WordPress

Siarto Jeff / O'Reilly Media / 2010-02-15 / USD 34.99

Whether you're promoting your business or writing about your travel adventures, "Head First WordPress" will teach you not only how to make your blog look unique and attention-grabbing, but also how to......一起来看看 《Head First WordPress》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具