一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后。下面开始说说js的方面的东西,由于自己的能力有现,有点地方说的不明白,还请高手指点。这个文章,如果有时间的话应该会写一个系列,包括js的高级方面的知识,最终希望能够说到js的引擎方面的东西。千里之行,始于足下,下面开始说说最简单的一个东西—js的作用域链,时常也比较容易弄错,也算是自己做一个纪录。

首先看一段代码:

 function t(){
          var b=1;
          if(b===1){
              var name="test1";
          }else{
              var name="test2";
          }
          console.log(name);
      }
      t();

这段代码,可能很多人认为输出的结果是undefine,但是输出的结果是:

可能有点想不明白,如果是在强类型里面这个肯定是要报错的,但是在js的词法分析和运行中确能运算出来结果,这个是原因是什么呢?原来是js中的作用域是和C++/C中的不一样,js中没有块级作用域,作用域只有函数,只要在一个函数里面,你定义的变量在函数的内部任何地方都可以访问到,包括嵌套的函数。用官方的话说是所谓的函数作用域。所以上面的结果就是一个有值的数据,而不是一个undefine.

再看代码修改:

function t() {
    var sp = "test1";
    if (true) {
        var sp = "test2";
        console.log(sp);
    }
    console.log(sp);
}
t();

这次输出的结果应该很简单了,只要是在函数内部的块级作用域有js里面都不起作用,所以代码可以拆解成:

 function t() {
    var sp = "test1";
    // if (true) {
    var sp = "test2";
    console.log(sp);
    // }
    console.log(sp);
}
t();

所以再次输出都是test2;

好了,现在应该是初步了解了js的函数作用域了,这个理解清楚了,作用域链自然也就不攻自破。下面看一个简单的代码:

var _name = "windows";
function t() {
    var name = "test1";
    function t1() {
        console.log(_name);
        console.log(name);
    }
    t1();
    console.log(_name);
    console.log(name);
}
t();

如果上面的问题都清楚的话,这个代码应该很简单,因为js是函数的作用域,所以在函数内数据都有能访问,执行顺序如下:

1、在1中,执行console.log(_name);这个_name在当前的函数内没有,到t函数中去寻找,t函数中也没有就会到windows里面去找,找到_name并输出windows,同理2步骤输出”test1”

2、3与4 步骤也是同样的道理,所以结果是

从上面的例子可以看出js作用域特点:1、没有块级的作用域,在一个函数的内部定义都有效 2、如果当前数据在当前的函数里面的没有话,会沿着层级向上找。

t1->t->window,从而形成作用域链。

第十八篇 js高级知识---作用域链的更多相关文章

  1. 第十九篇 js高级知识---词法分析和AO 链

    上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...

  2. JS高级心法——作用域链

    首先我们来看两个js中的代码:    <script type="text/javascript"> var c=5; function t1(){ var d=6 f ...

  3. 第20篇 js高级知识---深入原型链

    前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...

  4. 第十八篇 .NET高级技术之Linq与EF Code-First Fluent API基础讲解

    1.FluentApi简介 在这里提供了一个fluentapi基础的DEMO然后咱们在进一步的学习,直接上干货. 第一步在数据库创建一个表:person 第二步:新建控制台程序FluentAPI 第三 ...

  5. 第十八篇 JS传参数

    JS传参数   参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...

  6. Python之路【第十八篇】:Web框架们

    Python之路[第十八篇]:Web框架们   Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...

  7. Egret入门学习日记 --- 第十八篇(书中 8.5~8.7 节 内容)

    第十八篇(书中 8.5~8.7 节 内容) 其实语法篇,我感觉没必要写录入到日记里. 我也犹豫了好久,到底要不要录入. 这样,我先读一遍语法篇的所有内容,我觉得值得留下的,我就录入日记里. 不然像昨天 ...

  8. Bootstrap入门(二十八)JS插件5:工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  9. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

随机推荐

  1. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  2. 云脉推出表格识别API接口可以自助接入

    针对如今市场上对于海量票据信息的录入需求,近期厦门云脉技术有限公司推出票据识别相关的产品与服务,更是在云脉OCR SDK开发者平台上上线表格识别API接口,供广大开发者和集成商自助接入.为了降低财务系 ...

  3. LeetCode---Depth-first && Breadth-first

    417. Pacific Atlantic Water Flow 思路:构造两个二维数组分别存储大西洋和太平洋的结果,先初始化边界,然后从边界出发,深度优先遍历,标记满足条件的所有节点 static ...

  4. windows apache 开启 GZIP

    从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快.目前比较通用的压缩方法是启用gzip压缩.它 会把浏览器请求的页面,以及页面中引用的静态资源以压缩包 ...

  5. --@angularJS--简单的带嵌套的指令demo

    <!DOCTYPE HTML><html ng-app="app"><head>    <title>custom-directiv ...

  6. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景(五)

    [前言和思路整理] 千呼万唤Shǐ出来!终于到最后一章啦~ 很抱歉这一章卡了那么久才发布.主要原因是家里电脑主板的内存插槽炸了,返厂后这周才收到,平时在公司也基本没什么时间写……再次表示歉意. 上一章 ...

  7. HDU-1430-素数回文

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1431 这题之前做过,又不会做了, 思路先直接暴力,输入a=5 b=500000000得到最大的值为9 ...

  8. Java数据库连接--JDBC基础知识(操作数据库:增删改查)

    一.JDBC简介 JDBC是连接java应用程序和数据库之间的桥梁. 什么是JDBC? Java语言访问数据库的一种规范,是一套API. JDBC (Java Database Connectivit ...

  9. Java Swing JScrollPane 设置滚动量

    JScrollPane.getVerticalScrollBar().setUnitIncrement(20); 参考:http://bbs.csdn.net/topics/320249228

  10. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...