学习前端也有一段时间了，觉得自己可以与大家分享一些我当初遇到疑惑的东西，希望能给对此问题有疑惑的朋友带来一点帮助。

先来普及一下JS的概念（不要嫌我啰嗦，可能一些朋友开始学习JS是跟着视频和写好的代码学的，应该有一部分对它的结构或者说它的历史还不太了解）,JavaScript由三种东西组成，一个叫ECMAScript,一个叫DOM，还有一个叫BOM，我们现在说的JS其实是它的核心——ECMAScript，简称ES。如今市面上的浏览器大部分是运行的ES5，但有一些也支持ES6，某些技术大牛都是用ES6编程然后转ES5，工具是Babel。但我们现在首要学习的还是ES5，只有深入理解了ES5才能做好其他事情。

　　言归正传，今天我们谈的是ES5里面的作用域链和原型链，当时我学习这一章的时候也是比较害怕的，因为以前学习生物的时候啊，什么DNA链啊生物链啊，就感觉特复杂，对链这个玩意有种“一朝被蛇咬十年怕井绳”的感觉。后来在不断地学习与编码过程中呢，我逐步的理解了这一些东西，也感谢一些前辈们的文献与代码。

　　说到底作用域链，顾名思义，它是与作用域在一起的，何为作用域，我们知道JS里的function，它是用来声明一个函数的，每一个函数运行的时候会拥有一个自己的执行环境，每个执行环境都能拥有一个位置来存储这个环境里面定义的变量和函数，当这个执行环境的所有代码执行完了之后，该环境被销毁，保存在其中的所有变量和函数定义也被销毁掉了，我们可以把这一个执行环境称为一个作用域。（这里值得一提的是ES5没有块级作用域的概念，只有函数里面的东西运行完会被销毁，不在函数里的东西，比如for（var i=0;i<10,i++）这个i不在函数里，而是在一个全局的循环中，它就是一个全局变量。这些问题一些大公司正在协商解决，ES6里大体上已经优化的很好了）

　　说完了作用域，我们就可以来讲讲作用域链了，作用域链是单向的。全局window是最大的作用域，全局里声明的函数是次一级的作用域，这样的函数里面可以访问到全局里的各种变量和函数，但在全局中访问不到这个函数里面的函数和变量；这样次一级里面的函数是再次一级，它同样也是可以访问上一级和全局的函数与变量，而上级访问不到这个里面的东西，这样一层一层的递进，就成了一条链子，也就是作用域链；

　　我们看一串代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <script type="text/javascript">

             var idol = "J.J";

             function writeIdol() {

                 console.log("我的偶像是" + idol); //J.J(可以访问11行全局的idol)

                 idol = "eason"; //修改了11行idol的值

                 function askAnotherIdol() {

                     var anotherIdol = "echo";

                     console.log("我的偶像是" + idol); //15行“eason”

                     console.log("其他的偶像有" + anotherIdol) //17行“echo”

                 }

                 askAnotherIdol();

                 console.log("我的偶像是" + idol); //这个时候得到的是15行“eason”

                 console.log("其他的偶像有" + anotherIdol) //得不到了，因为作用域链是单向的

             }

             writeIdol();

             //执行顺序为：writeIdol函数执行==>输出idol（“J.J”）==>修改idol为"eason"==>执行askAnotherIdol函数

             //==>在函数内部声明新变量anotherIdol值为"echo"，输出全局idol（已修改“eason”）==>输出其他的偶像有“echo”

             //==>输出全局idol（已修改“eason”）==>输出anotherIdol（anotherIdol is not defined，因为作用域链的单向）

         </script>

     </body>

 </html>

　　作用域链可以通过这个例子来理解，通俗点，大鱼吃小鱼，小鱼吃虾米——大鱼可以吃小鱼，小鱼却吃不了大鱼。我们可以把全局当成虾米，最里面的函数当大鱼就好啦，虽然理解起来有点奇怪，如果没有自己的理解方式，这样套用一下也是可以的嘛。

　　作者也是第一次写博客，如果写的不太好或者有疑惑的，欢迎大家提出建议和问题，因为要吃饭啦，本篇就先写个我对作用域链的理解吧，原型链在下一篇好好写写。

谈JS中的作用域链与原型链（1）的更多相关文章

  1. js 中对象--对象结构（原型链基础解析）

    对于本篇对于如何自定义对象.和对象相关的属性操作不了解的话,可以查我对这两篇博客.了解这两篇可以更容易理解本篇文章 用构造函数创建了一个对象  obj对象的本身创建了两个属性  x=1   ,y=2 ...

  2. js中继承的实现，原型链的知识点归纳，借用构造函数，组合继承（伪经典继承）

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e ...

  3. JS的作用域链与原型链

    来一波,好记性不如烂笔头. 这两条链子可是很重要的. 作用域链 当执行一段JS代码(全局代码或函数)时,JS引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加 ...

  4. js通过沿着作用域链还是原型链查找变量

    这是一道非常典型的JS闭包问题,结果和具体的解析请看这里. 对于其中的`函数作用域链的问题`博主似乎没有解释清楚,有一些疑问:js中的变量到底是沿着作用域链还是原型链查找呢? 首先,要分清作用域链与原 ...

  5. js语言评价--js 基于哈希表、原型链、作用域、属性类型可配置的多范式编程语言

    js 基于哈希表.原型链.作用域.属性类型可配置的多范式编程语言 值类型.引用类型.直接赋值: 原型是以对象形式存在的类型信息. ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值,对 ...

  6. javascript作用域链与原型链有联系吗?

    一般来说,作用域链是针对变量的,js里面大的范围上来说,只有两种作用域,全局作用域和函数内部作用域,如果函数1里面又定义了函数2(一般都是匿名函数), 那么就有了这么一个作用域链全局作用域==> ...

  7. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  8. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  9. JS中的作用域及闭包

    1.JS中的作用域 在 es6 出现之前JS中只有全局作用域和函数作用域,没有块级作用域,即 JS 在函数体内有自己的作用域,但是如果不是在函数体的话就全部都是全局作用域.比如在 if.for 等有 ...

随机推荐

  1. 中国产品众筹NO.1诞生

    中国产品众筹NO.1诞生 淘宝众筹打响新拐点之战 http://bbs.taobao.com/catalog/thread/508895-317240623.htm?spm=1.7274553.199 ...

  2. 一个异步任务接收两个url下载两个图片

    有两个url,一个是下载用户头像的url,一个是下载用户上传图片的url,想要用一个异步任务同时下载这两个图片. 程序的下载任务是这么执行的,先接受url参数,然后调用 imgUrls = infoP ...

  3. UVa 10986 - Sending email

    题目大意:网络中有n个SMTP服务器,有m条电缆将它们相连,每条电缆传输信息需要一定的时间.现在给出信息的起点和终点,计算所需的最小时间. 有权图上的单源最短路问题(Single-Source Sho ...

  4. java基础面试

    1. String类为什么是final的. 安全性:如果字符串是可变的,那么会引起很严重的安全问题.譬如,数据库的用户名.密码都是以字符串的形式传入来获得数据库的连接,或者在socket编程中,主机名 ...

  5. Leetcode 181. Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  6. chrome的功能Copy as cURL

    https://segmentfault.com/q/1010000002508961

  7. spark使用总结

    背景 使用spark开发已有几个月.相比于python/hive,scala/spark学习门槛较高.尤其记得刚开时,举步维艰,进展十分缓慢.不过谢天谢地,这段苦涩(bi)的日子过去了.忆苦思甜,为了 ...

  8. thinkphp CURD 1

    二.ThinkPHP 3 读取数据    (重点)    对数据的读取 Read    $m=new Model('User');    $m=M('User'); select    $m-> ...

  9. Java中的集合类型的继承关系图

    Java中的集合类型的继承关系图

  10. Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储

    在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...