作用域

  在JavaScript中,我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称(变量名或者函数名)进行变量查找。

经过研究《高级程序设计》第3版的第四章,作用域相关的知识,自己总结并画了如下图,希望能让大家对作用域链有更好的理解,(可拖拽到新窗口查看大图)

总结: 作用域链:就是由多级作用域连续引用形成的链式结果;

        它掌管着一切变量的使用顺序!(即:先在局部找,找不到,再沿着作用域链向父级找,作用域链的最末端永远是全局变量对象)

=========================================================================================================================

作用域小知识点:

es5里只有函数(局部)作用域和全局作用域,而没有块级作用域;和JAVA等语言不同

    var arr = [];

    for (var i = 0; i < 5; i++) {
arr[i] = function () {
console.log(i);
};
} arr[0]();//
arr[1]();//
arr[2]();//
arr[3]();//
arr[4]();//

我们发现和我们预期的结果不一致,最终的结果都是5;

解决办法:

我们可以通过立即执行函数(闭包)的形式,即用函数作用域模拟出块级作用域的效果,我们把上面例子进行修改

    var arr = [];

    for (var i = 0; i < 10; i++) {
(function(i) {
arr[i] = function () {
console.log(i);
};
})(i);
} arr[0]();//
arr[1]();//
arr[2]();//
arr[3]();//
arr[4]();//

es6里面新增了,const和let,这两个有块级作用域

像刚刚的for循环函数,我们就仅仅需要把 var i  => 改为    let i 即可;代码如下:

    var arr = [];

    for (let i = 0; i < 5; i++) {
arr[i] = function () {
console.log(i);
};
} arr[0]();//
arr[1]();//
arr[2]();//
arr[3]();//
arr[4]();//

const和let    与    var  有三大区别:

1、没有“变量提升hoisting”;

2、有“暂时性死区temporal dead zone”;

  暂时性死区:

  只要块级作用域内,存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;

if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

  上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

  ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

  总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

3、不允许在相同作用域内重复声明;

// 报错
function func() {
let a = 10;
var a = 1;
} // 报错
function func() {
let a = 10;
let a = 1;
}

建议:在使用ES6语法的项目中,不再使用var,使用let和const代替之。

js中作用域链和作用域的更多相关文章

  1. js中的块级作用域

    概述 函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则. 但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏 ...

  2. 理解js中的自由变量以及作用域的进阶

    如果你不知道什么是作用域,建议你先看什么是作用域链,什么是原型链.这篇文章,因为这些内容都是有关联性的. 什么是自由变量? 如我在全局中定义了一个变量a,然后我在函数中使用了这个a,这个a就可以称之为 ...

  3. 关于js中变量声明和作用域的理解

    1. var是声明一个变量:虽然声明了这个变量,但在存入值之前,它的初始值是 undefined:2.全局变量:拥有全局作用域,在js代码中的任何地方都是有定义的:3.局部变量:在函数内声明的变量只在 ...

  4. JS中for循环变量作用域--解决for循环异步执行的问题

    被这个问题困惑了很久,终于在网上找到了答案,感谢~ 现在分享给大家~ js中如何让一个for循环走完之后,再去执行下面的语句? 这涉及for循环变量作用域的问题,js中作用域只有函数作用域和全局作用域 ...

  5. 一个经典的js中关于块级作用域和声明提升的问题

    function functions(flag) { if (flag) { function getValue() { return 'a'; } } else { function getValu ...

  6. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  7. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  8. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  9. JS中原型链的理解

    new操作符具体干了什么呢?其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 第一行,我们创建了 ...

随机推荐

  1. 编程开发之--java多线程学习总结(4)

    3.使用锁机制lock,unlock package com.lfy.ThreadsSynchronize; import java.util.concurrent.locks.Lock; impor ...

  2. 南昌 Max answer

    https://nanti.jisuanke.com/t/38228 Alice has a magic array. She suggests that the value of a interva ...

  3. windows7用WMware安装Linux虚拟机详细步骤

    一.安装环境 windows7操作系统物理机VMware Workstation 软件(可以在网上下载)CentOS6.5镜像文件(其他版本都大同小异,这里以CentOS6.5为例)Cnetos6.5 ...

  4. Mac 安装Git

    一.安装 在进行安装前,要说一下,Git和SVN一样,都需要创建一个服务器的,他们都可以创建自己的版本管理服务器.对于个人和小团队来说,使用托管服务器可能更合适. 常见的有Github 和 Bitbu ...

  5. logstash 启动报找不主类或无法加载 java

    logstash 启动报无法找到主类解决方案 Zparkle 关注 2018.03.08 22:04* 字数 2051 阅读 1评论 0喜欢 0 当logstash启动时,首先要注意正确配置java ...

  6. IDEA 启动项目,tomcat中配置的虚拟路径无法使用

    有时候,使用idea启动项目,非动静分离项目,直接根据图片url地址显示图片,会发现图片无法显示,tomcat中配置的虚拟路径无法使用,这时候需要配置idea.选择路径,然后给与一个访问名就行了.

  7. HDU 5444 Elven Postman (2015 ACM/ICPC Asia Regional Changchun Online)

    Elven Postman Elves are very peculiar creatures. As we all know, they can live for a very long time ...

  8. bootstrap中对dropdown使用hover代替click

    bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...

  9. CentOS 7_64位系统下搭建Hadoop_2.8.0分布式环境

    准备条件: CentOS 7 64位操作系统 | 选择minimal版本即可(不带可视化桌面环境),也可以选择带完整版Hadoop-2.8.0 | 本文采用的是Hadoop-2.8.0版本.JDK1. ...

  10. Memcached分布式算法详解--转

    http://xiexiejiao.cn/java/memcached-consistent-hashing.html Memcached分布式算法在网上一搜可以找到一大片了,不过对于Memcache ...