博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《理解 ES6》阅读整理:块绑定(Block Binding)
阅读量:5962 次
发布时间:2019-06-19

本文共 5906 字,大约阅读时间需要 19 分钟。

变量声明一直是JavaScript中一个需要技巧的部分。在大多数基于C的编程语言中,变量(更正式地说是绑定)在声明的时候创建,然而在JavaScript中并不是这样。在JavaScript中,变量在何处创建取决于你用什么方式声明它。ES6提供了新的声明方式,让你可以更容易控制变量的作用域。接下来将说明为什么用var声明变量容易造成困扰以及ES6的块级绑定。

var声明和提升(var Declarations and Hoisting)

在JavaScript中,用var做变量声明相当于在函数顶部声明变量(如果在函数外面声明,那么变量拥有全局作用域),而不管这个变量实际上在何处声明,这称为提升(hoisting)。下面的例子可以说明什么是提升:

function getValue(condition) {    if (condition) {        var value = "blue";        return value;    } else {        //在这里value是可以被访问,值为undefined        return null;    }    //在这里value是可以被访问,值为undefined}

如果你不了解JavaScript,你可能认为变量value只有在condition为true的时候才被创建。但实际上变量value无论如何也会被创建。上面这段代码实际上与下面这段代码效果一样:

function getValue(condition) {    var value;    if (condition) {        value = "blue";        return value;    } else {        return null;    }}

可以看到,value的声明被提升到函数顶部,但是仍然在初始的位置完成初始化操作。这意味着变量value在else分支也可以被访问到,但在else中访问value其值为undefined因为在else块中并没有初始化value。变量提升通常给JavaScript新手带来困惑,并且在实际项目带来bug。因为这个原因,ES6提供了块级作用域选项让开发者更好的控制变量的生命周期。

块级声明(Block-Level Declarations)

块级声明的含义是:在变量声明的块作用域外,不能访问此变量。块级声明以下面两种方式声明:

  (1)在函数内声明

  (2)在块内声明(以{}包含)

很多基于C的语言都支持块级声明,ES6提供块级声明也是想让开发者拥有同样的开发灵活性。

let声明(let Declarations)

let的声明语言和var的声明语言是一样的。你可以将代码中的var用let替换,从而将变量的作用范围限制在当前块内。用let声明的变量不会被提升到块的顶部。最好是在块的最开始部分用let声明变量,这样在整个块内就都能访问到变量。来看下面的示例代码:

function getValue(condition) {    if (condition) {        let value = "blue";        return value;    } else {        //在这里value不能被访问        return null;    }    //在这里value不能被访问}

上面的getValue函数实际上很像我们在其他基于C的语言中声明的函数。value变量是用let声明的,不会被提升,所以现在只能在if块内访问到value变量。如果condition为false,那么value变量永远也不会被声明或初始化。

禁止重复声明(No Redeclaration)

 如果某个变量已经在作用域内声明,那么用let再次声明这个变量,就会报错。请看下面的代码:

var count = 30;let count = 40;  //报错

在上面的代码中,count被声明两次:var和let各声明一次。因为let不能重复定义一个已经存在的变量,所以上面的代码会抛出错误。但是如果let是在自己块内声明一个同名变量,将不会报错:

var count = 30;if (condition) {    let count = 40;  //没有报错}

 这里let定义count变量不会报错,是因为它在if块内创建的,而不是在外部的块。在if块内访问count的值为40,而不是外面的30。这与C/C++等语言的作用方式是一样的。

常量声明(const Declarations)

ES6支持用关键字const作常量声明。用const声明的变量在初始化后不能被修改。每个const变量在声明时必须被初始化,看下面的代码:

const maxItems = 30;const name;  //语法错误,name没被初始化

 maxItens在声明时被初始化,而name在声明时未被初始化,因而会报错。

常量声明 vs let声明(Constants vs. let Declarations)

const声明和let声明一样,都是块级声明,也就是说在块内用const声明的变量无法在块外被访问。const声明的变量也不会被提升。看下面的代码:

if (condition) {    const maxItems = 5;}//这里不能访问到maxItems变量

 const另外一个与let相似的性质是,在作用域内也不能重复声明变量。不管这个变量是用var还是let声明的。看下面的代码:

var message = "Hello";let age = 25;//下面两句都会报错const message = "Goodbye!";const age = 30;

在这些相似的性质之外,const和let之间还有一个重要的不同之处。对一个已经用const声明的变量赋值会报错,不管是strict还是non-strict模式:

const maxItems = 5;maxItems = 5;  //报错

const声明对象(Object Declarations with const)

const声明的对象可以修改对象的属性,看下面的代码:

const person = {    name: "Nicholas"};person.name = "Greg";  //没问题//报错person = {    name: "Greg"};

简单的说就是用const声明的变量,本身绑定的值不能变,但是指向的对象却是可以修改的。

循环内块绑定(Block Bindings in Loop)

开发者最想要支持块级绑定的地方也许是在for循环内,在循环内声明的变量不能在外部块访问到。下面的代码在JavaScript中是很常见的:

for (var i = 0; i < 10; i++) {    process(items[i]);}console.log(i);  //i可以被访问,输出10

在其他支持块级作用域的语言中,i是不可在循环体外被访问的。但是在JavaScript中,i被提升,在循环体外也可以被访问到。这容易导致问题,因为开发者的意图也是想让i只在循环体内被访问到。用let代替var,就可以达到预期的效果:

for (let i = 0; i < 10; i++) {    process(items[i]);}console.log(i);  //报错,i不可被访问

在这个例子中,i只能在循环内被访问。当循环结束后,i不可再被访问。

循环内的函数(Functions in Loops)

在循环体内创建函数一直是一个问题来源,因为循环变量可以在循环外被访问。下面是一段很典型的代码:

var funcs = [];for (var i = 0; i < 10; i++) {    funcs.push(function() {        console.log(i);    });}//输出10次10funcs.forEach(function(func) {    func();});

你可能希望这段代码输出0到9,但实际上这段代码输出10次10。原因在于,每次循环i都被共享,意味着在循环内每次创建函数时都引用了同一个变量。当循环结束时,i的值为10。所以最终上面的代码打印出10次10。通常的解决方法是立即执行函数表达式(IIFE),用闭包在每次循环时复制一份变量解决:

var funcs = [];for (var i = 0; i < 10; i++) {    funcs.push((function(value) {        return function() {            console.log(value);        }    }(i)));}//输出0到9funcs.forEach(function(func) {    func();});

 在ES6中,你可以用let和const达到IIFE的效果。

循环内的let声明(let Declarations in Loops)

在循环体内用let声明变量可以达到上面代码中使用IIFE的效果。在每次迭代时,循环会创建一个新的同名变量,并且初始化其值:

var funcs = [];for (let i = 0; i < 10; i++) {    funcs.push(function() {        console.log(i);    });}//输出0到9functions.forEach(function(func) {    func();});

很明显,上面这段代码在完成了开发者的需求的同时,更简洁。let声明每次迭代时都创建一个新的变量i。在for-in和for-of循环中也类似:

var funcs = [],var object = {    a: true,    b:true,    c: true};for (let key in object) {    funcs.push(function() {        console.log(key);    });}//输出a,b,cfuncs.forEach(function(func) {    func();});

在这个例子中,每次循环时,一个新的key绑定被创建,每个函数都有自己的key变量副本。如果我们用var声明变量key,那么会输出三个c。

循环体内的const声明(const Declarations in Loops)

ES6并没有明确禁止在循环中使用const声明变量,const根据loop的类型也会有不同的行为。在通常的for循环中,你可以用const声明一个变量然后初始化它,但是如果你试图修改变量值,解释器会给出警告:

var funcs = [];//第一次迭代后报错for(const i = 0; i < 10; i++) {    funcs.push(function() {        console.log(i);    });}

在上面这段代码中,i被声明为一个const变量。开始迭代时i为0,顺利执行。当执行i++时报错,因为你试图修改一个常量。因此只有当你不想在循环中修改某个变量时,才能用const定义。在for-in和for-of循环中,const变量和let变量类似。看下面的代码:

var funcs = [],var object = {    a: true,    b:true,    c: true};//没有报错for (const key in object) {    funcs.push(function() {        console.log(key);    });}//输出a,b,cfuncs.forEach(function(func) {    func();});

上面这段代码不会报错,因为每次循环都会创建一个新的const绑定,并没有对之前的变量进行修改操作。但是在循环内,循环变量key的值是不能被修改的(因为是const变量)。

 全局块绑定(Global Block Bindings)

let和const另外一个与var不同的地方在于全局作用域行为。当你在全局作用域用var创建一个变量,这个变量会成为全局对象的一个属性(比如在浏览器中全局对象是window)。那意味着你有可能用var覆盖掉一个全局变量。看下面的代码:

//在浏览器中var RegExp = "Hello!";console.log(window.RegExp);  //"Hello!"var ncz = "Hi";console.log(window.ncz);  //"Hi!"

在上面的代码中,尽管RegExp在window对象中定义,但仍然可以被var声明覆盖。下面的ncz变量被定义成一个全局变量,并且成为window对象的一个属性。如果你使用let或者const声明全局变量,那么不同的是,变量不会成为全局对象的属性,这也意味着你不能用let或者覆盖一个全局变量:

//在浏览器中let RegExp = "Hello!";console.log(RegExp);  //"Hello"console.log(window.RegExp === RegExp); //falseconst ncz = "Hi!";console.log(ncz);  //"Hi"console.log("ncz" in window);  //false

当用let声明一个全局变量RegExp后,你不能用RegExp继续访问原有的值,但是可以通过window.RegExp继续访问,RegExp和window.RegExp不相同。相似地,ncz创建后,并不会成为全局window对象的一个属性。当你不想创建全局对象属性的时候,let和const比var更加安全,因为它们不会修改全局对象属性。

转载于:https://www.cnblogs.com/xfshen/p/5950627.html

你可能感兴趣的文章
Qt creator :qmake xxx时发生错误
查看>>
chrome安装后无法使用问题
查看>>
ckeditor4 自定义插件 多图上传 图片上传
查看>>
处理 允许远程协助连接这台计算机 灰色
查看>>
使用Jquery 加载页面时调用JS
查看>>
css+div+jquery弹出层
查看>>
求职相关(链接,不定期更新)
查看>>
pdo 连接数据库 报错 could not find driver 解决方法
查看>>
设计模式之策略模式
查看>>
JVM介绍
查看>>
Qt中使用QToolBox实现抽屉效果
查看>>
双活数据中心建设之光大实践
查看>>
张晓辉:大众点评的分布式架构是怎样炼成的
查看>>
张军-大数据的理解与分布式进化计算方法
查看>>
关于Hibernate 查询oracle 字段为Date类型
查看>>
深入学习Java虚拟机之——垃圾收集算法与垃圾收集器
查看>>
android反编译之获得java源代码
查看>>
优盘驱动制作
查看>>
(分享)笔记C#基础知识
查看>>
resin
查看>>