小课堂

【js-TASK4】如何理解js中的作用域与作用域链?

分享人:何阳

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是作用域呢,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

2.知识剖析

1.全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:
(1)在函数外面定义的变量拥有全局作用域,例如:
var a ="全局变量";
function tion(){
console.log(a);
}
tion();

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:
function tion(){
var a="变量";
b="全局变量";
console.log(a);
}
tion();//变量
console.log(b);//全局变量
console.log(a);//脚本错误
变量b拥有全局作用域,而a在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域
一般情况下,window对象的内置属性都都拥有全局作用域,例如window.name、window.top等等。
var a ='baidu.com';
function text(){
console.log(this.a);
}
text();// 'baidu.com'
window.text();// 'baidu.com'
console.log(window.a);// 'baidu.com'
在上面示例中,a变量和text()函数方法没有指定上级对象,所在二者会被添加到window全局对象,所以直接访问二者与通过window访问本质相同(如,直接访问text()与使用window.text()访问一样)。

1. 局部作用域(Local Scope)
和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以在一些地方也会看到有人把这种作用域成为函数作用域
例如下列代码中的a和函数b都只拥有局部作用域:
function doSomething(){
var a="双击66";
function b(){
alert(a);
}
b();
}
doSomething();
console.log(a);//脚本错误
b();//脚本错误

作用域链(Scope Chain)
关于作用域链(Scope Chain)这个概念.作用域链就是由多个作用域组成的 在JS中,函数的可以允许嵌套的。即,在一个函数的内部声明另一个函数.类似这样:
function text(){
var a=1;
function textB(){
//在text函数内部,声明了函数textB,这就是所谓的函数嵌套。
var b=2;
}
}

3.常见问题

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

4.解决方案

5.编码实战

demo

6.扩展思考

如何运用作用域链的知识进行性能优化

其实作用域链就是JS引擎查询数据的一个链表,后定义的覆盖先定义的,查询不到定义的数据就往深一层查询,一直到全局作用域为止 但是越往内层延伸,读写速度就会越慢,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。 如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。例如下面的代码:
function changeColor(){
document.getElementById("a").onclick=function(){
document.getElementById("b").style.backgroundColor="red";
document.getElementById("a").style.backgroundColor="red"; };
}
这个函数引用了两次全局变量document,查找该变量必须遍历整个作用域链,直到最后在全局对象中才能找到。这段代码可以重写如下:
function changeColor(){
var a=document.getElementById("a");
var b=document.getElementById("b")
a.onclick=function(){
a.style.backgroundColor="red";
b.style.backgroundColor="red";
}; } 这段代码比较简单,但是如果程序中有大量的全局变量被从新反复访问,那么重写后的代码性能会有显著改善。

7.参考文献

参考: JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

8.更多讨论

鸣谢

感谢大家观看

By 要贝贝、何阳

Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He