词法作用域就是定义在词法阶段的作用域, 换句话说, 也就是 js 的作用域时在定义阶段决定的, 和调用无关.
1.1 作用域沿着作用链向上查找
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- // 引擎执行 console.log(); 在 bar() 内找不到 a, 向上查找, foo() 也找不到, 继续向上查找, 在 window 全局中查找, 找到 a;
- function foo(){
- var b = a*2;
- function bar(c){
- console.log(a,b,c) // 2 4 8
- }
- bar(b*2);
- }
- var a =2;
- foo(2)
- </script>
- </html>
1.2 函数作用域, 定义函数时, 会创建自己的气泡 (作用域), 外部作用无法直接访问.
1.3 立即执行函数 IIFE(Immediately Invoked Function Expression)
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- var a = 100;
- (function foo(){
- var a =1;
- console.log(a);
- })()
- console.log(a); //100
- </script>
- </html>
1.4 块级作用域
javascipt 没有块级作用域, 块级定义的变量会污染上一级作用域
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- for(vart i=1; i<10; i++){}
- console.log(i); //10
- </script>
- </html>
1.5 let 语法
es6 引入 let 语法可以解决 js 没有块级作用域问题, 强行绑定所在作用域
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- for(let i=1; i<10; i++){}
- console.log(i); // 报错
- </script>
- </html>
1.6 变量提升
来源: http://www.bubuko.com/infodetail-2671337.html