美文网首页IT修真院IT修真院-前端修真院任务
如何理解js中作用域和作用域链

如何理解js中作用域和作用域链

作者: 韩喜蛋 | 来源:发表于2017-07-28 10:53 被阅读13次

    1.背景介绍

    任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

    2.知识剖析

    1.全局作用域(Global Scope)

    在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

    (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

    var aName="编程艺术";

    function doSomething(){

    var bName="权威指南";

    function innerSay(){

    alert(bName);

    }

    innerSay();

    }

    alert(aName); //编程艺术

    alert(bName); //error

    doSomething(); //权威指南

    innerSay() //脚本错误

    (2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

    function doSomething(){

    bName="正则表达式";

    alert(bName)

    }

    alert(bName); //正则表达式

    (3)所有window对象的属性拥有全局作用域

    一般情况下,window对象的内置属性都都拥有全局作用域,例如window.name、window.top等等。

    1. 局部作用域(Local Scope)

    和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域

    例如下列代码中的id和函数innerSay都只拥有局部作用域:

    function localFun(){

    var id="217";

    function innerSay(){

    alert(id);

    }

    }

    alert(name); //脚本错误

    作用域链(Scope Chain)

    有了JavaScript的作用域的划分,那么可以将JavaScript的访问作用域连成一个链式树状结构.

    JavaScript的作用域链一旦能清晰的了解,那么对于JavaScript的变量与闭包就是非常清晰的了.

    下面采用绘图的办法,绘制作用域链.

    作用域链的作用:

    保证对执行环境有权访问的所有变量和函数的有序访问

    3.1绘制规则:

    1) 作用域链就是对象的数组

    2) 全部script是0级链,每个对象占一个位置

    3) 凡是看到函数延伸一个链出来,一级级展开

    4)访问首先看当前函数,如果没有定义往上一级链检查

    5) 如此往复,直到0级链

    3.常见问题

    如何更加直观的体现作用域链

    4.解决方案

    脚本之家:

    http://www.jb51.net/article/44307.htm

    5.编码实战

    6.扩展思考

    filter()、some()、map()、forEach()的异同点是什么?

    7.参考文献

    参考一:51CTO

    http://developer.51cto.com/art/201109/289286.htm

    参考二:博客

    http://blog.csdn.net/yueguanghaidao/article/details/9568071

    七、PPT链接:

    PPT

    八、视频

    如何理解js中作用域和作用域链_腾讯视频

    九、探讨问题

    //undefined和 is a not defined有什么区别??

    ==》当声明一个变量而没有赋值的时候会是undefined,当根被没有声明变量的时候,会是 is a not defined。

    //那为什么不能都设置成全局变量呢???

    ==》全局变量其实都是在Window对象下的变量,设置的全局多了以后会造成全局变量污染,不容易维护,且性能降低。。。每找一次变量,找到最外层window才能找到变量。

    //在函数中途声明一个变量,之前的还是局部变量么?

    ==》在函数中途声明一个变量,这个声明会有一个声明提升的作用,相当于把 var 提升到函数的最上部,所以这个变量就是局部变量了。

    //作用域和执行环境一样么??

    ==》是两个不同的概念。作用域主要指的就是作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期,而执行环境是定义了变量或者函数有权访问的其他数据,决定了各自的 行为。

    //为什么window.xx也能找到属性名字???

    ==》因为全局变量本身就是在window对象下的。

    就行像调用window.location等其他方法一样。

    //怎么让一个函数自执行

    ==>         (function () {}())       即可自执行。

    今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    下期预告:http状态码有那些?分别代表是什么意思?

    ---------------------------------------------------------------------------------------------------------------------------------------------------

    技能树.IT修真院

    “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

    这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

    我的邀请码:77778916,或者你可以直接点击此链接http://jnshu.com/login/1/77778916

    相关文章

      网友评论

        本文标题:如何理解js中作用域和作用域链

        本文链接:https://www.haomeiwen.com/subject/uoyxlxtx.html