谈JS中的做用域链与原型链（1）

时间 2019-12-11

原文原文链接

学习前端也有一段时间了，以为本身能够与你们分享一些我当初遇到疑惑的东西，但愿能给对此问题有疑惑的朋友带来一点帮助。javascript

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

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

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

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

　　咱们看一串代码：浏览器

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <script type="text/javascript">
11             var idol = "J.J";
12 
13             function writeIdol() {
14                 console.log("个人偶像是" + idol); //J.J(能够访问11行全局的idol)
15                 idol = "eason"; //修改了11行idol的值
16                 function askAnotherIdol() {
17                     var anotherIdol = "echo";
18                     console.log("个人偶像是" + idol); //15行“eason”
19                     console.log("其余的偶像有" + anotherIdol) //17行“echo”
20                 }
21                 askAnotherIdol();
22                 console.log("个人偶像是" + idol); //这个时候获得的是15行“eason”
23                 console.log("其余的偶像有" + anotherIdol) //得不到了，由于做用域链是单向的
24             }
25             writeIdol();
26             //执行顺序为：writeIdol函数执行==>输出idol（“J.J”）==>修改idol为"eason"==>执行askAnotherIdol函数
27             //==>在函数内部声明新变量anotherIdol值为"echo"，输出全局idol（已修改“eason”）==>输出其余的偶像有“echo”
28             //==>输出全局idol（已修改“eason”）==>输出anotherIdol（anotherIdol is not defined，由于做用域链的单向）
29         </script>
30     </body>
31 
32 </html>

　　做用域链能够经过这个例子来理解，通俗点，大鱼吃小鱼，小鱼吃虾米——大鱼能够吃小鱼，小鱼却吃不了大鱼。咱们能够把全局当成虾米，最里面的函数当大鱼就好啦，虽然理解起来有点奇怪，若是没有本身的理解方式，这样套用一下也是能够的嘛。函数

　　做者也是第一次写博客，若是写的不太好或者有疑惑的，欢迎你们提出建议和问题，由于要吃饭啦，本篇就先写个我对做用域链的理解吧，原型链在下一篇好好写写。工具