第18篇 js高级知识---作用域链

原创 2015年11月18日 23:09:36

         一直有想法去写写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);//1
        console.log(name);//2
    }
    t1();
    console.log(_name);//3
    console.log(name);//4
}
t();
复制代码

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

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

23步骤也是同样的道理,所以结果是

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。个人独立博客:http://blog.laofu.online/

JavaScript中的作用域链详解

题外话:最近面试一直被问到作用域链的问题,所以还是要深入透彻的学习一下这两个概念。作用域链在红宝书中对作用域链的描述有这么一段话:当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途...
  • charlene0824
  • charlene0824
  • 2016年08月19日 17:16
  • 1382

JavaScript关于作用域、作用域链和闭包的理解

作用域先来谈谈变量的作用域 变量的作用域无非就是两种:全局变量和局部变量。 全局作用域: 最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的: var oute...
  • whd526
  • whd526
  • 2017年04月29日 22:04
  • 571

Js作用域与作用域链详解

一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错。我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫。 一:函数作用...
  • yueguanghaidao
  • yueguanghaidao
  • 2013年07月28日 22:38
  • 89687

javascript 延长作用域链 与没有块级作用域

转自javascript高级程序设计(第三版): javascript的执行环境的类型共有两种:全局和局部(函数)。不过可以通过别的方法来延长作用域链。 1)try-catch语句的catch块 2)...
  • u013250416
  • u013250416
  • 2015年08月10日 10:45
  • 924

你不得不知道的js之作用域链与闭包

写在前面的话 作用域链和闭包 变量 变量的作用域 作用域链 闭包 闭包的一些应用写在前面的话 关于js中,作用域链和闭包是避不开的两个知识点,今天本文就简单介绍了一下关于作用域链和闭包的相关知识,本文...
  • zpw91
  • zpw91
  • 2016年12月22日 22:00
  • 456

Javascript 进阶 作用域 作用域链

一直觉得Js很强大,由于长期不写js代码,最近刚好温故温故。 1、Javascript没有代码块作用域的概念,局部作用域是针对函数来说的。 function fun() ...
  • lmj623565791
  • lmj623565791
  • 2014年05月05日 21:43
  • 11440

js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)

一.跨域问题的解决方法 啥是跨域: 所有的浏览器都遵守同源策略,保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内容,防止它们互相操作。所谓同源...
  • loguat
  • loguat
  • 2017年07月19日 17:30
  • 277

理解JavaScript的变量,变量作用域,作用域链

JavaScript的变量,变量作用域,作用域链
  • ganyingxie123456
  • ganyingxie123456
  • 2017年03月05日 22:34
  • 394

js 变量对象 作用域链

js 变量对象、变量实例化、作用域链
  • chenmoquan
  • chenmoquan
  • 2015年03月26日 16:29
  • 907

js高级知识---作用域链

一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后。下面开始说说js的方面的东西,由于自己...
  • wxw_317
  • wxw_317
  • 2015年11月19日 16:43
  • 305
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第18篇 js高级知识---作用域链
举报原因:
原因补充:

(最多只允许输入30个字)