一、js中的词法作用域和动态作用域

     词法作用域也就是在词法阶段定义的作用域,也就是说词法作用域在代码书写时就已经确定了。 

     js中其实只有词法作用域,并没有动态作用域,this的执行机制让作用域表现的像动态作用域,this的绑定是在代码执行的时候确定的。

   example1: 理解词法作用域  

    记住js中只有词法作用域没有真正的动态作用域,作用域是在代码书写时确定的

var value = 1;

function foo() {

    console.log(value);

}

function bar() {

    var value = 2;

    foo();

}

bar();
//1  

输出是1,函数在哪里调用没有关系,变量的位置在编译的词法分析阶段就确定了。

当调用foo时,会对value进行一次RHS查询,在当前函数作用域中没有查找到会查找到最外层的作用域,也就是全局作用域定义的value。

二、修改词法作用域

      在代码书写时,作用域(词法作用域)就已经确定了,但是可不可以再修改呢?

      通过eval和with都可以用来修改词法作用域。

eval:

function foo(str, a) {
eval(str)
console.log(a, b)//1,3
} var b = 2;
foo("val b = 3", 1)

with:

用来重复引用同一个对象中的多个属性的快捷方式

可以理解为修改对象中多个属性的值的快捷方式

function foo(obj) {
with(obj) {
a = 7
}
} var obj1 = {
a: 2
} var obj2 = {
b: 3
} foo(obj1)
console.log(obj1)// {a=7}
console.log(a) //7
foo(obj2)
console.log(obj2)//{b:3}
console.log(a)//7

with可以定义一个词法作用域, 值得注意的是with中定义的a=2会在全局作用域中包含一个a变量。

  

三、函数作用域和块作用域

      1、创建作用域的方式

          a)通过函数创建局部作用域

              1、通过函数声明的方式创建

              2、通过函数表达式创建:

              匿名函数表达式和具名函数表达式

区别函数表达式和函数声明的方式就是看声明的第一个关键字是否是function开头

          b)通过with、try...catch、let和const创建块作用域

              值得提的是let和const定义的块作用域

              let在声明变量时,会将变量附加在一个已经存在的块作用域上,一般是{}(隐式附加),let声明的变量是在js运行的时候才存在的。

     

Javascript中的词法作用域、动态作用域、函数作用域和块作用域(四)的更多相关文章

  1. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

  2. JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

        一.闭包(Closure)模糊概述 之前总觉得闭包(Closure)很抽象而且难理解,百度一下"闭包"名词,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代 ...

  3. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  4. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  5. JavaScript中以构造函数的方式调用函数

    转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...

  6. JavaScript中的bind,call和apply函数的用法和区别

    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...

  7. JavaScript中bind、call、apply函数用法详解

    在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手.前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务 ...

  8. JavaScript 中有关Array操作的一些函数

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...

  9. JavaScript中bind、call、apply函数使用方法具体解释

    在给我们项目组的其它程序介绍 js 的时候,我准备了非常多的内容,但看起来效果不大,果然光讲还是不行的,必须动手. 前几天有人问我关于代码里 call() 函数的使用方法.我让他去看书,这里推荐用js ...

随机推荐

  1. 2017 ACM-ICPC EC-Final ShangHai 东亚洲大陆-上海

    比赛链接:传送门 Gym 101775A Chat Group(签到:待补) Gym 101775B Scapegoat(待补) Gym 101775C Traffic Light(贪心+思维) 思路 ...

  2. Extend a root LVM partition online

    There is also a quick remedy for the emergency situation when your root partition runs out of disk s ...

  3. day11hadoop高可用和Hive

    PS:视频一直就是在演示   高可用(比较偏运维一点) PS:Active是对外提供服务的,standBy是从属备用的:但是他们是怎样保证同步的数据的呢?一个运行中zookeeper上的第三方那个工具 ...

  4. flex布局居中无效果注意是否设置了宽度

    <View style={{display:),backgroundColor:),alignItems:'center'}}> <JDTouchable style={styles ...

  5. mino 路径格式的bucket 数据访问

    实施上这个功能很简答,如果官方不支持,我们可以通过基于nginx 的url rewrite 也可以实现 格式说明 如果配置了domain minio 会将 http://mydomain.com/bu ...

  6. x的奇幻之旅 (史蒂夫·斯托加茨 著)

    第1部分 数字 第1章 数学:从企鹅的"鱼"订单到无穷大 (已看) 第2章 一组组石头与加减乘除运算 (已看) 第3章 "敌人的敌人就是朋友“与"负负得正&qu ...

  7. lch 儿童围棋课堂 初级篇2 (李昌镐 著)

    第1章 吃子 第2章 死活:实战演练 第3章 劫争 第4章 布局:定式篇 第5章 布局:三线,四线和大场 第6章 布局:布局类型与形势判断 第7章 中盘:分断 第8章 官子:价值的计算 第9章 对杀技 ...

  8. 深入理解计算机系统 (Randal E.Bryant / David O'Hallaron 著)

    第1章 计算机系统漫游 (已看) 1.1 信息就是位+上下文 1.2 程序被其他程序翻译成不同的格式 1.3 了解编译系统如何工作是大有益处的 1.4 处理器读并解释存储在内存中的指令 1.4.1 系 ...

  9. php-cgi和php-fpm,Windows环境下解决Nginx+php并发访问阻塞问题。

    php-cgi 是运行php,php-fpm是守护php-cgi进程 nginx配置目录运行php        location  ~ \.php$        {                 ...

  10. Spring技术内幕总结 - AOP概述

    AOP是Aspect-Oriented Programming(面向方面/切面编程)的简称.Aspect是一种新的模块化机制,用来描述分散在对象.类或函数中的横切关注点.分离关注点使解决特定领域问题的 ...