首页 > 代码库 > js---07 js解析器作用域

js---07 js解析器作用域

2024-09-20 14:45:27   216人阅读

js解析器首先不会逐行读代码，这是第二部了。
首先 根据var找到变量，根据function找函数，找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义，并不会读取等号后面的a = 1,所以a的值是未定义，并加入仓库，根据function找到函数后，function a (){ alert(2); }，找到函数是函数整体，这是js的预解析（预解析只找var 和函数）。遇到重名的留下后面的，变量和函数重名了，函数在后面，只留下函数。
正式读取代码的时候，是从上到下从左到右，上面<script/>块中定义的变量可以直接在下面的<script/>中使用。
alert(a);
var a = 1;
读取到alert(a);时候，因为之前a是未定义，所以这个报错，遇到表达式a = 1,就把之前a是未定义变成1。






var a = 1;
function fn1(){
    alert(a);
    var a = 2;
}
fn1();
alert(a);
首先预解析找到var a = 1,此时a未定义，和函数，加入仓库(预解析只解析var 和 函数的定义)。
预解析完了，从上到下执行，遇到函数调用fn1(); 函数是一个局部的域,会新开一个局部作用域，遇到域就进行预解析和逐行执行代码，局部预解析时var a 是未定义，局部预解析完了就开始逐行执行代码，alert(a)只会在函数局部域内找a是未定义，var a = 2只是改变局部域中a为2不会改变全局域的a，最后alert(a)弹出1






var a = 1;
function fn1(){
    alert(a);    
    a = 2;
}
fn1();
alert(a);
首先预解析，a是未定义，函数fn1也加入仓库，全局域的预解析完了。下面开始逐行执行代码。var a = 1把仓库中的a改成1，找到函数的定义，这里不动它，然后找到函数的调用fn1()，开始函数局部域的预解析，局部域中没有var 和函数定义，局部域的预解析完了，然后逐行执行函数内部，读到alert(a),在局部域中没有找到a，则会向上级域中去找，找到全局域的a = 1，弹出a = 1,在执行a = 2,局部作用域没有a则找到上级域，把a改成了2，最后弹出2.





var a = 1;
function fn1(a){
    alert(a);    //a是局部域中的仓库中的a,
    a = 2;
}
fn1();
alert(a);
首先预解析var a = 未定义 ，和函数fn1()加入仓库。
逐行执行代码a = 1,函数调用fn1(),看到参数a,会在函数局部作用域解析a = 未定义，alert(a)弹出未定义，a= 2改变局部作用域中的a的值，最后alert(a),弹出1。







var a = 1;
function fn1(a){
    alert(a);//a是局部域中的仓库中的a,
    a = 2;
}
fn1(a);
alert(a);
全部预解析，a=未定义，函数就是一个函数。
读代码，全局a=1，函数定义不动。函数调用，局部开始新的预解析和逐行读代码，局部没有var 没有function，有参数a,加入局部域的仓库a = 未定义，接下来局部域逐行读代码，首先从参数开始读，a= 1,是从全局前面传进来的，局部作用域的a等于1了，alert（a）弹出1，a=2修改局部作用域的a =  2,全局a没有改变，因为a参数传进来相当于局部域定义了一个新变量a，最后弹出1






function fn2(){
    var a = ‘9999999克拉钻石23456789‘;
    fn3(a);
}
fn2();

function fn3(a){
    alert(a);
}
全局解析：把函数fn2()和fn3()加入全局的仓库。
逐行读代码： fn2()调用：
             局部解析 var a = 未定义，无函数定义
             局部逐行读代码，a = ‘9999999克拉钻石23456789‘,函数调用fn3(a),局部域仓库中没有找到fn3()的定义，去全局域中找，找到了，fn3(a)调用开始：
                           局部的局部解析，参数相当于新定义一个局部变量，a = 未定义
                           局部的局部逐行执行代码，a = 全局传进来的值9999999克拉钻石23456789，alert(a)
             
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
    var aBtn = document.getElementsByTagName(‘input‘);
    for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].onclick = function (){
            alert( i );            // 一直是3，因为for执行完之后i一直等于3
            //aBtn[i].style.background = ‘yellow‘;
            for( var i=0; i<aBtn.length; i++ ){
                aBtn[i].style.background = ‘yellow‘;
            }
        };
    }
};
</script>

</head>

<body>

<input type="button" value="http://www.mamicode.com/按钮1" />
<input type="button" value="http://www.mamicode.com/按钮2" />
<input type="button" value="http://www.mamicode.com/按钮3" />

</body>
</html>

 

js---07 js解析器作用域


联系
我们