一、全局作用域和局部作用域
大家都知道，在javascript中var一个新的变量，那么这个变量在javascript中的任意位置都能访问到，而在javascript的function中var一个新的变量，那么这个变量只能在这个函数内访问到，而在全局访问不到。
var profession="程序员";
function jianshu(){
console.log(profession);
var author="我不叫奇奇";
function hobby(){
console.log("吉他");
}
hobby();
age=19;
}
console.log(profession);//程序员
console.log(author);//error
hobby();//error
jianshu();//程序员 吉他
console.log(age);//19
profession作用域是全局，所以函数内也能访问到。
author、hobby的作用域是jianshu内，所以全局不能使用。
所有末定义直接赋值的变量自动声明为拥有全局作用域，所以age的作用域是全局。
二、作用域链
在javascript中，一切皆对象，当然，函数也是对象，而每一个函数在创建出来的时候有一些自带的属性，其中有一个叫[[scope]],该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
function sum(a,b){
var sum=a+b;
}
函数被创建的时候他的作用域链中会默认填入一个全局函数，如下图所示
而当函数执行的时候会创建出一个叫"执行期上下文"的内部属性。这个是默认的代码运行环境，一旦代码被载入，引擎最先进入的就是这个环境。它包含了函数内的[[scope]]中的全局函数，之后还会以函数中的局部变量、命名参数、参数集合、this，穿件一个活动对象，被放置在全局函数之上。
function sum(a,b){
var sum=a+b;
}
var total=sum(1,2);
如下图
三、作用域链的代码优化
刚刚我说过了运行期上下文，代码在执行的时候，系统会优先从scope链的最上层开始搜索（类似于栈的概念）。搜索不到会到下一个搜索，知道了这个，我们就可以进行代码的优化了。
function animate(){
document.getElementById("color").onclick=function(){
document.getElementById("to-animate").color="red";
}
}
function animate(){
var doc=document;
doc.getElementById("color").onclick=function(){
doc.getElementById("to-animate").color="red";
}
}
当我们在函数内大量调用了某一个对象，如document，我们可以将document定义到局部变量中，这样document会被创建到scope链最顶端的active object中，每次可以更快的查找到document而不用反复查找。
注意：doc=document这条语句也进行了一次查询，所以如果只用到一次document，我们就没有必要再把document附加到局部变量了。
四、作用域链的改变
当一个函数被调用的时候，会相应的创建出一个执行期上下文的内部属性，当函数调用完成后这个内部属性会自行销毁，一般情况下，这个执行期上下文只会被with和catch影响。
function animate(){
with(document){
var color = getElementById("color").color;
if(color!="red"){
getElementById("green").color="red";
}
}
}
这里使用with来避免多次使用document，但是却产生了新的性能问题。
with会改变执行期上下文的值，如下图
一个新的可变对象被创建，而系统每次访问必须先经过这个可变对象，访问代价反而更高了。同样，try catch也和这个类似，当系统出现异常时，catch内的变量作为一个新的可变对象被放置在执行期上下文的顶端，访问代价反而更高了。
爱程序，爱前端，喜欢的朋友可以关注我，里面有更多关于前端的小知识。
网友评论