全文字数:8078字
全文阅读时间:21mins
在本文中,我们将着重讨论作用域链。首先我们会了解作用域、块级作用域、相关的一些重要概念等前置基础知识,接着我们会通过几个例子来对作用域链进行详细讲解,最后我们还会涉及作用域链延长的问题。在了解完上述知识之后,在本文主要内容的最后,我们还精选了网上几个作用域链相关的题目供小伙伴思考。
作用域详解
作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在Javascript中,变量的作用域有全局作用域和局部作用域两种,局部作用域又称为函数作用域。
那什么又是全局作用域和局部作用域呢?
var name = "xinzhuoyue";
function hello(){
alert(name);
}
function sayHello(){
hello();
}
alert(name); //能访问到name
hello(); //能访问到name
sayHello(); //能访问到hello函数,然后也能访问到name
function hello(){
name = "xinzhuoyue";
var word = "helloworld";
}
alert(a); //能访问到name
alert(b); //error 不能访问
一般情况下,window对象的内置属性都拥有全局作用域,例如window.name、window.location、window.top等等。
局部作用域在函数内创建,在函数内可访问,函数外不可访问。
function hello(){
var name = "xinzhuoyue";
alert(name);
}
hello(); //函数内可访问到name
alert(name); //error not defined
块级作用域
Javascript没有块级作用域,在其他类C的语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来讲,就是它们自己的执行环境)。对于有块级作用域的语言来说,for语句初始化变量的表达式所定义的变量,只会存在于循环的环境中。而对于Javascript来说,由for语句创建的变量 i 即使在for循环执行结束后,也依旧会存在于循环外部的执行环境中。
使用var声明的变量会被自动添加到最接近的环境中,在函数内部,最接近的环境就是函数的局部环境;在with语句中,最接近的环境是函数环境。如果初始化变量时没有使用var声明,该变量会被自动添加到全局环境。
function add(num1,num2){
var sum = num1+num2;
return sum;
}
var result = add(10,20);//30
alert(sum);//error
编写代码时,不声明而直接初始化变量是一个常见的错误做法,因为这样可能会导致错误。我们建议在初始化变量之前一定要先声明,这样就可以避免类似问题。在严格模式下,初始化未经声明的变量会导致错误。
不规范代码展示:
function add(num1,num2){
sum = num1+num2;
return sum;
}
var result = add(10,20);//30
alert(sum);//30
当在某个环境中为了读取或写入而引用一个标识符时,必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始,向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到该标识符,搜索过程停止,变量就绪。如果在局部环境中没有找到该变量名,则继续沿作用域链向上搜索。搜索过程将一直追溯到全局环境的变量对象。如果在全局环境中也没有找到这个标识符,则意味着该变量尚未声明。
var name = "xinzhuoyue";
function getName(){
return color;
}
alert(getName());//xinzhuoyue
调用本例中的函数getName()时会引用变量name。为了确定变量name的值,将开始一个两步的搜索过程。首先getColor()的变量对象,查找其中是否包含一个名为color的标识符。在没有找到的情况下,搜索继续到下一个变量对象(全局环境的变量对象),然后在那里找到了名为name的标识符。因为搜索到了定义这个变量的变量对象,搜索过程宣告结束。在这个搜索过程中,如果存在一个局部的变量的定义,则搜索过程会自动停止,不再进入另一个变量对象。换句话说,如果局部环境中存在着同名标识符,就不会使用位于父环境中的标识符,如下例子:
var name = "xinzhuoyue";
function getName(){
var name = "weilaoshi";
return name;
}
alert(getName());//"weilaoshi"
修改后的代码在getName()函数中声明了一个名为name的局部变量。调用函数时,该变量就会被声明。而当函数中的第二行代码执行时,意味着必须找到并返回变量name的值。搜索过程首先从局部环境中开始,而且在这里发现了一个名为name的变量,其值为 weilaoshi 。因为变量已经找到了,所以搜索即行停止,return语句就使用这个局部变量,并为函数会返回 weilaoshi 。也就是说,任何位于局部变量name的声明之后的代码,如果不使用window.color都无法访问全局name变量。如果有一个操作数是对象,而另一个不是,就会在对象上调用valueOf()方法以取得基本类型的值,以便根据前面的规则进行比较。
重要概念
变量和函数的声明
在JavaScript引擎解析JavaScript代码的时候,首先,JavaScript引擎会把变量和函数的声明提前进行预解析,然后再去执行其他代码。
变量的声明只有一种方式,那就是用var关键字声明,直接赋值不是一种声明方式。这仅仅是在全局对象上创建了新的属性(而不是变量)。它们有以下区别:
alert(a); // undefined
alert(b); // error "b" is not defined
b = 10;
var a = 20;
alert(a); // undefined, 这个大家都知道
b = 10;
alert(b); // 10, 代码执行阶段创建
var a = 20;
alert(a); // 20, 代码执行阶段修改
a = 10;
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
var b = 20;
alert(window.b); // 20
alert(delete b); // false
alert(window.b); // 仍然为 20,因为变量是不能够删除的。
eval('var a = 10;');
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
函数的声明有三种方式:
function add(a,b){
return a+b;
}
add(5,4);
var add=new Function("a", "b", "return a+b;");
add(4,5);
var add = function(a,b){
return a+b;
}
add(4,5);
后面两种方法,在声明前访问时,返回的都是一个undefined的变量。当然,在声明后访问它们都是一个function的函数。
注意:
如果变量名和函数名声明时相同,函数优先声明。
alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20
函数的的生命周期分为创建和执行两个阶段。
在函数创建阶段,JS解析引擎进行预解析,会将函数声明提前,同时将该函数放到全局作用域中或当前函数的上一级函数的局部作用域中。
在函数执行阶段,JS引擎会将当前函数的局部变量和内部函数进行声明提前,然后再执行业务代码,当函数执行完退出时,释放该函数的执行上下文,并注销该函数的局部变量。
英文解释:
AO:Activetion Object(活动对象)
VO:Variable Object(变量对象)
VO对应的是函数创建阶段,JS解析引擎进行预解析时,所有的变量和函数的声明,统称为Variable Object。该变量与执行上下文相关,知道自己的数据存储在哪里,并且知道如何访问。VO是一个与执行上下文相关的特殊对象,它存储着在上下文中声明的以下内容:
举个例子:
function add(a,b){
var sum = a + b;
function say(){
alert(sum);
}
return sum;
}
// sum,say,a,b 组合的对象就是VO,不过该对象的值基本上都是undefined
AO对应的是函数执行阶段,当函数被调用执行时,会建立一个执行上下文,该执行上下文包含了函数所需的所有变量,该变量共同组成了一个新的对象就是Activetion Object。该对象包含了:
举个例子:
function add(a,b){
var sum = a + b;
function say(){
alert(sum);
}
return sum;
}
add(4,5);
// 我用JS对象来表示AO
// AO = {
// this : window,
// arguments : [4,5],
// a : 4,
// b : 5,
// say : ,
// sum : undefined
// }
作用域链
现在我们回到主题,作用域链。
当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象(VO)
function add(a,b){
var sum = a + b;
return sum;
}
假设函数是在全局作用域中创建的,在函数a创建的时候,它的作用域链填入全局对象,全局对象中有所有全局变量,此时的全局变量就是VO。此时的作用域链就是:
//此时作用域链(Scope Chain)只有一级,就为Global Object
scope(add) -> Global Object(VO)
VO = {
this : window,
add :
}
如果是函数执行阶段,那么将其activation object(AO)作为作用域链第一个对象,第二个对象是上级函数的执行上下文AO,下一个对象依次类推。
add(4,5);
例如,调用add后的作用域链是:
//此时作用域链(Scope Chain)有两级,第一级为AO,然后Global Object(VO)
scope(add) -> AO -> VO
AO = {
this : window,
arguments : [4,5],
a : 4,
b : 5,
sum : undefined
}
VO = {
this : window,
add :
}
在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程,从第一个对象开始,逐级向后回溯,直到找到同名标识符为止,找到后不再继续遍历,找不到就报错。
看过上面的内容后,可能还有人不懂,我再通熟易懂的解释一遍,先举个例子:
var x = 10;
function foo() {
var y = 20;
function bar() {
var z = 30;
console.log(x + y + z);
};
bar()
};
foo();
上面代码的输出结果为60,函数bar可以直接访问z,然后通过作用域链访问上层的x和y。此时的作用域链为:
//此时作用域链(Scope Chain)有三级,第一级为bar AO,第二级为foo AO,然后Global Object(VO)
scope -> bar.AO -> foo.AO -> Global Object
bar.AO = {
z : 30,
__parent__ : foo.AO
}
foo.AO = {
y : 20,
bar : ,
__parent__ :
}
Global Object = {
x : 10,
foo : ,
__parent__ : null
}
作用域链的延长
内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数。但有些语句可以在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除。当执行流进入下列任何一个语句时,作用域链就会得到加长:
try中的代码捕获到错误以后,会把异常对象推入一个可变对象并置于作用域的头部,在catch代码块内部,函数的所有局部变量将会被放在第二个作用域对象中,catch中的代码执行完,会立即销毁当前作用域。
<html>
<head>
<script type="text/javascript">
var txt="";
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本页中存在错误。\n\n";
txt+="错误描述:" + err.description + "\n\n";
txt+="点击“确定”继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
这两个语句都会在作用域链的前端添加一个变量对象。对with语句来说,会将指定的对象添加到作用域链中。对catch语句来说,会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明。下面看一个例子。
function buildUrl() {
var qs = "?debug=true";
with(location){
var url = href + qs;
}
return url;
}
原来的作用域链如下:
加入with之后,作用域链如下:
在此,with语句接收的是location 对象,因此其变量对象中就包含了location对象的所有属性和方法,而这个变量对象被添加到了作用域链的前端。buildUrl()函数中定义了一个变量qs。当在with 语句中引用变量href 时(实际引用的是location.href),可以在当前执行环境的变量对象中找到。当引用变量qs时,引用的则是在buildUrl()中定义的那个变量,而该变量位于函数环境的变量对象中。至于with语句内部,则定义了一个名为url的变量,因而url就成了函数执行环境的一部分,所以可以作为函数的值被返回。
相关题目训练
console.log(a());// 2
var a = function(){
console.log(1);
}
console.log(a());// 1
function a(){
console.log(2);
}
console.log(a());// 1
console.log(b());// reference error
function test() {
console.log(a);// undefined
console.log(b);// reference error
console.log(c);// reference error
var a = b =1;// 等价于 var a=1;b=1;
let c = 1;
}
test();
console.log(b);// 1
console.log(a);// reference error
严格模式下:
"use strict";
function test() {
console.log(a);// undefined
console.log(b);// reference error
console.log(c);// reference error
var a = b =1;// 直接抛出语法错误
let c = 1;
}
test();
console.log(b);// reference error
console.log(a);// reference error
进入严格模式后,b=1这种语法会直接出错,不会变成全局变量
要求:要间隔一秒打印出1-5的数字
解决方法:
for(let i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},i*1000); // 1 2 3 4
}
for (var i =1;i<6;i++) {
(function(i){
setTimeout(function(){
console.log(i)
},i*1000)
})(i)
}
function、var、let、const的区别:
本文总结
在上述文章中,我们仔细讲解了作用域链的相关知识,小伙伴们学会了吗?快来试试内容部分最后的几个题目吧~