IT修真院IT修真院-前端修真院任务

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

2017-07-28  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读