以语言的角度学习 Js 的底层原理(与 DOM 无关):① 作用域链 ② 词法分析 ③ 闭包 ④ 面向对象(原型链)
① 作用域链
例1
<script> var c = 5; function t1(){ var d = 6; function t2(){ var e = 7; alert(c + d + e); } t2(); } t1(); </script>
弹出:18
首先在函数内寻找变量,如果寻找不到,则往外层寻找,直到全局(window)区域。
例2
<script> var c = 5; function t1(){ var d = 6; function t2(){ var e = 7; var d = 3; alert(c + d + e); } t2(); } t1(); </script>
弹出:15
寻找变量的顺序是由内向外,变量 d 首先找到了 3 ,从而不会继续向外曾寻找变量 d 。
例3
<script> alert(window.d); alert(window.e); function t(){ d = 5; var e = 6; } t(); alert(window.d); alert(window.e); </script>
依次弹出:undefined,undefined,5,undefined
d 没有加 var ,仅仅是一个赋值操作,寻找 t 域内的函数,没找到,继续寻找 → window,widow.d = 5(第 3 个 alert)
var 是在函数运行的上下文中,声明一个变量,如果不加 var,则是赋值操作,但不要狭隘地理解为 声明了一个全局变量(见例4)。
例4
<script> function t1(){ var d; function t2(){ d = 5; e = 6; } t2(); } t1(); console.log(d); console.log(e); </script>
console 中打印出:Uncaught ReferenceError: d is not defined
如果只
console.log(e);
则打印出 6
t2 内部没有 d 变量,仅仅是赋值操作,往外层寻找 d 变量,在t1 函数中找到了,于是把变量 d 的值赋给了 5;
e 也仅仅是赋值操作,并没有相应的变量,因此往外找变量,直到找到最外层(window),还是没有找到,只有 window.e = 6
如果
console.log(window.d);
console.log(e);
则打印出:
undefined
6
注意区别:以 window.*** 引用全局变量时,如果寻找不到,则作为某个属性不存在而返回 undefined;若直接以 *** 引用某变量,寻找不到则是报 *** is undefined 错误。
例5(极容易出错又极基础的面试题)
1 <script> 2 var str1 = 'global'; 3 function t1(){ 4 console.log(str1); 5 console.log(str2); 6 str2 = 'local'; 7 } 8 t1(); 9 </script>
打印出:
global
Uncaught ReferenceError: str2 is not defined
【分析】:
第 4 行在执行时,在 t1 内寻找 str1,没有,于是在 window 上寻找 str1,找到,因此打印'global'
第 5 行在执行时,在 t1 内寻找 str2,没有,于是在 window 上寻找 str2,没有,因此报 str2 is undefined 错误
第 6 行(由于第 5 行出错,实际上执行不到这里),才把全局的 str2 赋值(window.str2 = 'local')
例6(例5 基础上修改:str2 前加 var)
<script> var str1 = 'global'; function t1(){ console.log(str1); console.log(str2); var str2 = 'local'; } t1(); </script>
打印出:
global
undefined
加了 var ,则声明了一个变量。
【分析】:
js 代码自上而下执行,但是js 代码的整体运行分:① 词法分析 和 ② 运行期,
在自上而下执行之前,先有词法分析过程。
在该例中
第 1 步:分析t1 函数:
t1{
var str2 //分析出 t1 内有 str2 局部变量。此时只是分析有改变量,并没有赋值(未执行),因此 str2 的值是undefined
}
第 2 步:执行 t1 函数:
console.log(str1); // global
console.log(str2); // undefined
str2 = 'local'; // 此时str2 的值为 'local'