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

先来普及一下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. jstree使用小结(一)

    项目中用到tree结构,使用了jstree做个笔记如下: 1. 官网: http://www.jstree.com/    有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O [PS: 一 ...

  2. C语言－while循环

    循环是结构化程序设计的基本结构之一,它和顺序控制.选择结构共同作为各种复杂程序的基本构造单元(摘自谭浩强的<C程序设计>. 一.while循环: 1.使用while循环控制输出0到9十个数 ...

  3. [Angular Tutorial] 1-Static Template

    为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页 ...

  4. Cannot create PoolableConnectionFactory (ORA-28040: No matching authentication protocol

    Oracle 12c 如果java报这个错误,用oracle自带的ojdbc6.jar,可以解决这个问题.

  5. ANT风格URL规则

    转: 我们在看Java技术书籍的过程中,当加载文件时总会遇到是否支持ant风格路径加载,这里说的ant风格是什么意思呢,今天我查了一下,明白了什么意思,现在总结一下 ANT通配符有三种: 通配符 说明 ...

  6. Bmob 之 简单使用

    1. pod pod 'BmobSDK' 与 pod "BmobSDK" 好像没什么区别 2. 导入 在AppDelegate中: #import <BmobSDK/Bmob ...

  7. 让表格table呈现边框，不用给tr、td加边框的写法

    <table width="100%" cellspacing="1" cellpadding="1" bgcolor="# ...

  8. 1.4.2.5. 测试（Core Data 应用程序实践指南）

    测试的方法也很简单: 首先,在AppDelegate.h里面引用CoreDataHelper @property (strong, nonatomic, readonly)CoreDateHelper ...

  9. HTTP Session学习

    session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的含义也很不相同.这里只探讨HTTP S ...

  10. Javascript中alert</script>的方法

    Javascript中alert</script>的方法: <%@ page language="java" import="java.util.*&q ...