开始之前

  由于本人也是JavaScript初学者,记录学习经过,怕以后会忘记。

  对于JavaScript 初学者来说,最难的不是代码部分,而是对很多书籍中的术语的理解,大多时候想要理解一段JavaScript书籍中的解释内容,就会涉及很多术语,在术语不通的情况下都会对内容理解偏差(导致很难记住所学内容),由于本人在阅读书籍时经常会遇到这一问题,所以今天将记下这一基础内容。

一、需要关注点

  1)执行环境(作用域)函数执行环境 变量作用域

  2)函数作用域和声明提前

  3)自由变量

  4)词法作用域和静态作用域

  5)动态作用域

二、解释

  1)执行环境(作用域)变量作用域

    说到执行环境这个词,对于看过JavaScript高级程序设计的同学并不陌生,那么我们就先来看看什么是执行环境:

    1.执行环境:简称:“环境”,是JavaScript中最重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为,每个执行环境都有一个与之关联的“变量对象(variable object)”,环境中定义的所有变量和函数都保存在这个对象中。我们编写的代码是无法访问这个对象的,但解析器在处理数据时会在后台使用它。

    2.全局执行环境是最外围的一个执行环境,在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法来创建的。某个执行环境中的所有代码执行完毕后,该环境就会被销毁,保存在其中的所有变量和函数定义也随之销毁。

    3.函数执行环境:每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。 

    4.作用域链:它的用途是保证对执行环境有权访问的所有变量和函数的有序访问,作用域链的前端,始终都是当前执行的代码所在的环境的变量对象。当代码在一个执行环境中执行时,会创建变量对象的一个作用域链(scope chain)。

                  

  2)声明提前

    1.声明提前:javascript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,这意味着变量在声明之前是可用的,这也是原因。这步操作是在javascript "预编译"时进行的,是在代码运行之前。

// 局部变量优先于全局变量
// 函数嵌套的情况下,最内层函数变量优先于在它之上的函数变量
var scope = 'global scope'; function checkScope() {
// body...
var scope = 'local scope'; function nested() {
var scope = 'nested scope';
return scope;
}
return nested();
} var scope = checkScope();
console.log('varable scope :', scope) // 'nested scope'

  3)自由变量:在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量。

ar x = 10;
function fn(){
var b = 20;
console.log(x + b); // x 就是一个自由变量。
}

  4)词法作用域和静态作用域:词法作用域等同于静态作用域,静态作用域规则查找一个变量声明时依赖的是源程序中块之间的静态关系;

  5)动态作用域规则依赖的是程序执行时的函数调用顺序。

    静态作用域和动态作用域的一个重要区别在于:
    静态作用域规则查找一个变量声明时依赖的是源程序中块之间的静态关系;
    而动态作用域规则依赖的是程序执行时的函数调用顺序。
    说的具体点,就是静态作用域查找的是距离当前作用域最近的外层作用域中同名标识符的声明,
    而动态作用域则是查找最近的活动记录

JavaScript 是使用词法作用域。

关于作用域几篇比叫好的文章:

http://www.cnblogs.com/zxj159/archive/2013/05/17/3084598.html

http://www.cnblogs.com/wangfupeng1988/p/3992795.html

JavaScript 词法、静态、动态作用域初级理解的更多相关文章

  1. javascript中闭包与作用域的理解

    很多js的框架与插件编写都用到了闭包,所以,阅读和掌握闭包很有必要.最近学习vue框架时,经常会猜想很多功能的native js实现,很多都应用到了闭包,闭包除了目前已知的一些特性,如:可以保持局部变 ...

  2. 【进阶2-2期】JavaScript深入之从作用域链理解闭包(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记   https://github.com/yygmind/blog/issues/18 红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一 ...

  3. 《你不知道的JavaScript(上)》笔记——动态作用域

    动态作用域让作用域作为一个在运行时就被动态确定的形式, 而不是在写代码时进行静态确定的形式.动态作用域并不关心函数和作用域是如何声明以及在何处声明的, 只关心它们从何处调用. 换句话说, 作用域链是基 ...

  4. js之词法作用域与动态作用域

    事实上JavaScript并不具有动态作用域,它只有词法作用域,简单明了,但是this机制某种程度上很像动态作用域 词法作用域:是一套引擎如何寻找变量以及会在何处找到变量的规则,它是定义在词法阶段的作 ...

  5. 《前端之路》之四 JavaScript 的闭包、作用域、作用域链

    04:JavaScript 的闭包 一.定义: 常规定义: 闭包的定义: 有权利访问外部函数作用域的函数. 通俗定义: 1.函数内部包含了函数.然后内部函数可以访问外部函数的作用域. 2.内部函数可以 ...

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

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

  7. 【转】深入理解javascript作用域——词法作用域和动态作用域

    前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作 ...

  8. JavaScript深入之词法作用域和动态作用域

    作用域 作用域是指程序源代码中定义变量的区域. 作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. JavaScript 采用词法作用域,也就是静态作用域. 静态作用域与动态作用域 因 ...

  9. 【作用域】词法作用域(静态作用域,如:js)、动态作用域(如:.bash脚本)

    作用域 作用域是指程序源代码中定义变量的区域. 作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. JavaScript 采用词法作用域(lexical scoping),也就是静态作 ...

随机推荐

  1. OpenCV颜色空间——HLS颜色空间

    引自:http://blog.csdn.net/zhangping1987/article/details/73699335 HLS颜色模型 HLS颜色空间,三个分量分别是色相(H).亮度(L).饱和 ...

  2. 推荐几个不错的h5游戏引擎

    http://www.phaser.io/examples http://www.cocos.com/ http://cn.cocos2d-x.org/tutorial/lists?id=30 coc ...

  3. Entity Framework应用:根据实体的EntityState状态实现增删改查

    在上一篇文章中,我们讲解了使用EF实现简单的增删改成,在这篇文章中我们使用实体的EntityState状态来优化数据的增删改查. 一.修改数据 上篇文章中的修改数据的方法是EF官方推荐的方式,即先查询 ...

  4. javascript 获取当前部署项目路径

    javascript 获取当前部署项目路径 ========================================= javascript获取当前部署项目路径: 主要用到Location 对 ...

  5. IDEA初始化配置

    1.配置git 2.配置JDK[Configure-->Oroject Defaults-->Project Structure] 3.配置maven

  6. window10删除导航栏中的onedrive

    前面介绍了如何删除导航栏中的“快速访问”,对于一个根本用不着的“oneDrive”肯定也得搞掉. 0.处理前: 1.卸载onedrive是不能清除导航栏里面的onedrive的,进入注册表regedi ...

  7. ecshop常用的一些变量

    <!-- {if $smarty.session.user_rank gt 1}-->gt大于 lt小于1:ecshop模板中调用session的值 {$smarty.session.us ...

  8. [转]8款实用的jQuery/CSS3最新插件应用

    今天给大家分享8款非常酷的最新jQuery/CSS3应用插件,废话少说,下面一起来看看这些插件吧. 1.HTML5重力感应积木游戏 这也是一款基于HTML5技术的重力感应游戏,一些积木从天而降,你可以 ...

  9. 三个支持正则表达式的行处理的工具: grep/sed/awk

    grep: 全称Global Regular Expression Print, 是干什么的,不多说了: 用法:grep [-options] [pattern] [filename] 选项: -c: ...

  10. JDBC插入数据实例

    在本教程将演示如何在JDBC应用程序中向数据库的一个表中插入数据记录. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式中数据库表中插入数据记录. 要执行以下示例, ...