在前端学习中,作用域这个问题一直被广泛提起,什么是作用域,什么又是作用域链?在Javascript中,怎么去理解这些概念都是学好这门语言的关键,所以在学习前端开发的过程中,我需要也很有必要去学习和总结下javascript----作用域。

  作用域并不难,但是去很少有人能稍微深入的解释什么是作用域,知其然而不知其所以然显然是远远不够的,所以我们就深入浅出一下,

  本片博文旨在深度去分析作用域,如有总结不到位之处,请读者海涵并在评论区指出。

  谈到作用域就不得不谈到一个名词----执行环境。什么叫执行环境呢?

  执行环境是Javascript中最为重要的一个概念,它定义了变量或函数有权访问其他数据,决定了他们各自的行为。那么在每个执行环境中都有一个叫做“变量对象”的object,执行环境中的所有变量和函数都保存在这个对象中,这个object是无法被访问到了,它只能在后台被javascript解释器访问到。

  浏览器在解析Javascript代码的时候会为每个函数创建一个执行环境,并在该执行环境中生成一个变量对象来存储变量和其内部的函数。我们常常用到的window就是最外围的执行环境,也叫全局执行环境,每个执行环境的代码执行完成之后,该环境被销毁,其中的变量对象也将被销毁,而全局执行环境只会在浏览器或网页关闭的时候被销毁,其他的执行环境(或者内部的)则为局部执行环境(函数)

  每个函数都有自己的执行环境,那么当代码的执行流进入到一个函数时,会将该执行环境推入到一个环境栈中,在函数执行完成之后又将其弹出,把对这个执行环境的控制权交还给之前的执行环境,当代码在一个执行环境中执行的时候,会将该环境中的变量对象连入到作用域链中。作用域链的作用就是保证对执行环境中的有权访问的变量和函数有序的访问。说到这里,大家可能有些迷糊啦,那么就用点代码和图片来解释下吧。

//window scope
var name0 = 'scope0'
console.log(name0) //这里可以访问到name0
function scope1(){
var name1 = 'scope1'
     console.log(name0,name1) //这里可以访问到name0,name1
function scope2(){ var name2 = 'scope2'
         console.log(name0,name1,name2) //这里可以访问到name0,name1,name2 
function scope3(){ var name3 = 'scope3'
              console.log(name0,name1,name2,name3) //这里可以访问到name0,name1,name2,name3
}
}
}

  当JS解释器去执行这段代码的时候,会生成4个执行环境,分别是window,scope1,scope2,scope3。然后再执行JS代码的时候,会把每个执行环境推入到执行栈中,并生成变量对象给连接到作用域链中(从上到下),最后生成的作用域链就为:

window→scope1→scope2→scope3

对于每个执行环境中的变量对象来说,它的作用域链就是它本生加上它之前的变量对象(例如scope2的作用域链就是scope2和它之前的scope1和window)。我们先前说道,每个执行环境中的变量对象就是该执行环境能够访问到了变量和函数,个人理解为这个函数就是变量对象的作用域链上其他的变量对象,那么就很好理解了,我们分析下上面代码scope2的变量对象上有哪些东西,首先是参数数组(arguments,这里为[])还有name2变量,然后是scope1的变量对象和全局变量对象。

  说了这么多,提了那么多概念和名词,我们好像只是说到了作用域链,但是并没有说到作用域,这不是扯淡嘛!!!!好吧,我们现在就来谈谈作用域。

  

  还是先来扯下概念吧。是每个执行环境可以通过作用域链向上访问这个他的作用域链的其他执行环境,但是不能向下访问。这个就是作用域啦。。。

  还是拿scope2函数来说吧,他可以访问name2,name1,name0但是不能访问name3,这个就是作用域的限定,他只能访问到scope1和window的执行环境(还有它本身)。额,就这么一小段,我自己都醉了,但是个人觉得作用域就这点东西,关键的是在与对执行环境、变量对象和作用域链的理解。这些才是扎实的理解Javascript作用域的关键。

  

  其实说到这里我感觉已经差不多了,第一次写那么长的博文,文章水准还有待提高,这篇文章主要是我在看《javascript高级程序设计》的看到作用域这小节,感觉作者写了太好了,于是乎加上了一些个人的理解就写了这篇博客。非常希望有对WEB开发有深刻理解的大大们提出批评和见解。

  

老生常谈的Javascript作用域问题的更多相关文章

  1. JavaScript作用域

    JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...

  2. 关于Javascript作用域及作用域链的总结

    本文是根据以下文章以及<Javascript高级程序设计(第三版)>第四章相关内容总结的. 1.Javascript作用域原理,地址:http://www.laruence.com/200 ...

  3. JavaScript作用域链

    之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...

  4. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  5. Python自动化 【第十六篇】:JavaScript作用域和Dom收尾

    本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走 ...

  6. 深入理解javascript作用域系列第一篇——内部原理

    × 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域 ...

  7. 深入理解javascript作用域系列第二篇——词法作用域和动态作用域

    × 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...

  8. 深入理解javascript作用域系列第四篇——块作用域

    × 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...

  9. 深入理解javascript作用域系列第三篇——声明提升(hoisting)

    × 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javasc ...

随机推荐

  1. POI创建Excle

    1.导包 2.Demo Workbook wb=new HSSFWorkbook();//创建工作空间 Sheet sh= wb.createSheet("工作表1");//创建工 ...

  2. Web项目中JSP页面的一种调试方法与出现的问题 -- SpringMVC架构测试

    在前端开发中,尤其是MVC架构多人开发,负责前端的童鞋总是需要做静态页面,再和后台连接前无法使用变量如EL表达式等测试功能,所以本人引入了一个模板jsp数据测试专用文件,专门配置所有的变量,然后在待测 ...

  3. 容器 SET part2

    (6) insert   STL中为什么提供这样的set的insert呢? 这个成员函数存在的目的是为了插入效率的问题.函数参数中的 __position 只是一个提示值,表示在这个位置附近(可前可后 ...

  4. uC/OS-II中的中断(转)

    中断是指在程序运行过程中,应内部或外部异步事件的请求中止当前任务,而去处理异步事件所要求的任务的过程. 中断服务函数(ISR)是应中断请求而运行的程序. 中断向量就是中断服务函数(ISR)的入口地址, ...

  5. cf B. Berland Bingo

    http://codeforces.com/contest/370/problem/B 题意:给你n个卡片,卡片上有m个不同的数字,这个游戏是随即的从袋子里面抽球,球上有数字1-100:如果第ith玩 ...

  6. HADOOP都升级到2.5啦~~~

    经过前年的初次接触,现在已大约能理解整个体系啦.MAPREDUCE都改成YARN啦. 不过,还得继续往前走,再能实用... HIVE,HBASE,ZOOKEEPER,, 思路如下: 安装系统,配置网络 ...

  7. 使用Qt实现MDI风格的主窗体

    文章来源:http://hi.baidu.com/wuyunju/item/3d20164c99a276f6dc0f6c52 QT提供了MDIArea控件可以很方便的实现标准的MDI窗体,但用起来并不 ...

  8. bzoj4034

    http://www.lydsy.com/JudgeOnline/problem.php?id=4034 树链剖分. 跟NOI2015的“软件包管理”一模一样..... 河南的爽死了...... #i ...

  9. zoj3802:easy 2048 again(状压dp)

    zoj月赛的题目,非常不错的一个状压dp.. 题目大意是一个一维的2048游戏 只要有相邻的相同就会合并,合并之后会有奖励分数,总共n个,每个都可以取或者不取 问最终得到的最大值 数据范围n<= ...

  10. sql的交叉连接,内连接,左外连接,右外连接,全外连接总结

    实践是最好的检验,一直都对这几个连接查询出来的结果有什么不同不大理解,然后自己放一块查询比较了一下,用结果来说话~ 先建两张表如下: t1: id name age 1 张三 18 2 李四 25 t ...