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

转载 2015年11月19日 16:43:58

一直有想法去写写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”

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

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

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

JavaScript高级程序设计零碎知识点

1.包含在元素内部的JS代码会被从上到下依次解释,浏览器在对内部的所有代码求值完毕之前,页面中的其余内容都不会被浏览器加载或显示。 2.现代Web应用程序一般都把JavaScript的引用放到元素...
  • hellobeifeng
  • hellobeifeng
  • 2015年05月08日 15:49
  • 1075

js高级编程入门理解

1、js有对象吗,如果有对象,如何创建对象,对象里面的内容又是什么。 答:js有对象,通过 new 函数名创建对象,对象里面的内容是prototype上的内容下面我们案例测试window.onload...
  • u012316953
  • u012316953
  • 2016年09月26日 13:30
  • 2241

SQL 高级知识 3

23、SQL CREATE INDEX 语句 CREATE INDEX 语句用于在表中创建索引。 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据。 23.1 索引 ...
  • hebbely
  • hebbely
  • 2016年06月12日 09:39
  • 702

成为一名优秀的高级JAVA工程师必备的知识总结

1.Core Java,就是Java基础、JDK的类库,很多童鞋都会说,JDK我懂,但是懂还不足够,知其然还要知其所以然,JDK的源代码写的非常好,要经常查看,对使用频繁的类,比如String,集合类...
  • liuxinnidongde
  • liuxinnidongde
  • 2016年11月15日 16:45
  • 1265

android高级知识汇总

本文来自于清华(潇涧)的Java总结,已得到其本人允许转载Android公共技术:公共技术点之 Android 动画基础公共技术点之 Java 动态代理公共技术点之依赖注入公共技术点之 View 事件...
  • c_cayujie
  • c_cayujie
  • 2017年01月03日 14:50
  • 1475

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

一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后。下面开始说说js的方面的东西,由于自己...
  • fw199006
  • fw199006
  • 2015年11月18日 23:09
  • 202

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

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

js高级知识---词法分析和AO 链

Demovar name = "test"; function t() { alert(name); var name = "test1"; alert(name); }...
  • qq_36047372
  • qq_36047372
  • 2017年08月08日 17:48
  • 85

JS高级---原型链(一看就懂,但18岁以下请绕道)

1)小明是小明妈生的,小狗是小狗妈生的。小明和小狗都是对象实例,而小明妈和小狗妈就是原型。原型也是对象,叫原型对象。      2)小明妈和小明爸啪啪啪能生出一堆小明明、小狗妈和小狗爸啪啪啪能生出一...
  • xiaotao_css
  • xiaotao_css
  • 2017年05月27日 16:14
  • 1324

Php高级知识 1

1、PHP 多维数组   一个以上的键存储值,可以用多维数组进行存储。 1.1 PHP - 多维数组 多维数组指的是包含一个或多个数组的数组。 PHP 能理解两、三、四或五级甚至更多级的多维数组...
  • hebbely
  • hebbely
  • 2016年06月18日 15:00
  • 1651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js高级知识---作用域链
举报原因:
原因补充:

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