JavaScript作用域学习笔记

作用域链

作用域的原理: ”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”
所以函数的作用域其实是在它们被定义的那时就决定，和运行时没啥关系。看下面这个简单的例子：

var name = 'world';
function echo() {
     alert(name); //undefined
     var name = 'hello'; 
     alert(name); //hello
     alert(age); //error
}
echo();

这个例子其实等于下面这个，就是把局部变量定义提升了：

var name = 'world';
function echo() {
     var name;
     alert(name); //undefined
     name = 'hello'; 
     alert(name); //hello
     alert(age); //error
}
echo();

这样就好理解了。

预编译

直接看例子吧：

<script>
     alert(typeof eve); //结果:function
     alert(typeof walle); //结果:undefined
     function eve() { //函数定义式
          alert('hello world');
     };
     var walle = function() { //函数表达式
     }
     alert(typeof walle); //结果:function
</script>

在JavaScript里，在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义(var),和函数定义(function), 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

改变(延长)作用域

1. with语句，会将指定对象添加到作用域链中，这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。实际使用时要避免使用with语句。
2. try-catch语句的catch块，当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。以下例子可以优化代码性能：

try {
  doSomething();
} catch (ex) {
  handleError(ex); //委托给处理器方法
}

参考资料

• 鸟哥：Javascript作用域原理
• 理解 JavaScript 作用域和作用域链