聊一聊JavaScript作用域和作用域链

每种编程语言,其变量都有一定的有效范围,超过这个范围之后,变量就失效了,这就是变量的作用域。从数学的角度来看,就是自变量的域。

作用域是变量的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在 JavaScript 中, 对象和函数同样也是变量,变量在声明他们的函数体以及这个函数体嵌套的任意函数体内部都是有定义的。

一、静态作用域和动态作用域

静态作用域

是指声明的作用域是根据程序正文在编译时就确定的,也称为词法作用域。大多数现代程序设计语言都是采用静态作用域规则,JavaScript就是采用的这种作用域。
采用静态作用域的语言中,基本都是最内嵌套作用域规则:由一个声明引进的标识符在这个声明所在的作用域里可见,而且在其内部嵌套的每个作用域里也可见,除非它被嵌套于内部的对同名标识符的另一个声明所掩盖。
为了找到某个给定的标识符所引用的对象,应该在当前最内层作用域里查找。如果找到了一个声明,也就可以找到该标识符所引用的对象。否则我们就到直接的外层作用域里去查找,并继续向外顺序地检查外层作用域,直到到达程序的最外嵌套层次,也就是全局对象声明所在的作用域。如果在所有层次上都没有找到有关声明,那么这个程序就有错误。如下:

function cha(){ var name = "xiao;" function chb() { function chc() { console.log(name); } } }

首先函数从chb()搜索有没有name的定义,然后继续一层一层的向上搜索,最后在cha()中搜到了name的定义,如果没有搜到,则会报错。

2、动态作用域

动态作用域的语言中,程序中某个变量所引用的对象是在程序运行时刻根据程序的控制流信息来确定的。

二、JavaScript的作用域

JavaScript中有两种作用域,分别为全局作用域和局部作用域。

1、全局作用域(Global Scope)

在代码中任何位置都是有定义的。即使在html 页面中嵌套的一段js代码中定义了一个全局变量,在引用的js文件中仍能访问到该变量。这就很有可能会造成全局变量的污染。

以下三种情况的变量都会被视为全局变量
(1)最外层的函数和最外层的变量拥有全局作用域
(2)未经定义而直接赋值的变量自动被声明为拥有全局作用域
(3)所有window对象的属性拥有全局作用域

2、局部作用域(Local Scope)

局部作用域一般只能在固定的代码片段中才能访问,如函数内部的变量(函数作用域)

var name = "xuxiaoping"; function echoName() { var firstname = "xu";//局部作用域 secondname = "xiao";//全局作用域 function echoFirstName() { console.log(first name);//xu } console.log(secondname); return echoFirstName; } console.log(name);//全局作用域 var f = echoName(); f(); console.log(firstname); console.log(secondname);

结果为:
xuxiaoping
xiao
xu//内层函数可以访问外层函数的变量
undenfined  //在函数外部无法访问函数的内部变量
xiao

JavaScript将全局变量附加到了window对象上,成为了window对象的属性。

3、函数作用域

块级作用域:任何一对花括号中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的。大多数类C语言都是有块级作用域的。
然而JavaScript的有个重要的特点就是没有块级作用域。

function echoi() { for(var i = 0;i<10;i++){ ;//console.log(i); } if(true){ var str = "hello"; } console.log(i); console.log(str); } echoi();

输出结果为:

10
 hello

可见,在for语句外(也可以是if,while),块中定义的变量i仍然是可以访问的。也就是说,JavaScript并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。作为一个一开始编程就学习学习C和java的人来说,这个有点难以适应。据我测试PHP也是这样的。

当然可以利用JavaScript的闭包的特性,模拟个块级作用域

function echoi() { (function() { for(var i = 0;i<10;i++){ ;//console.log(i); } })(); if(true){ var str = "hello"; } console.log(i); console.log(str); } echoi();

结果为:i undefined

这样就隔离了变量的定义。在js中,为了防止命名冲突,应该尽量避免使用全局变量和全局函数,因此这种闭包的用的特别的多。

4、JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

三、JavaScript的作用域链

一看是链,大概就可以跟数据结构中的链表相结合起来

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzppjy.html