js作用域详解

fwxstar 2018-06-26 600次浏览

摘要: 浏览器执行操作步骤:     “JS解析器”         1)“找一些东西”:var&...
浏览器执行操作步骤:
    “JS解析器”
        1)“找一些东西”:var function 参数
            a=未定义
              (所有变量,在正式运行之前,都提前赋予了一个值:未定义)
            fn1=function fn1(){alert(1)};
               (所有函数,在正式运行代码前,都是整个函数块 )

            此过程称之为:js 预解析
            (注意点:如果遇到重名,只留一个;变量若与函数重名,留下函数)

        2)逐行解读代码
            表达式:= + - * / % 参数 ....
            表达式可以修改预解析的值!


第一种:

alert(a); //function a(){alert(2)};
var a=1;
alert(a); //1
function a(){alert(1)};
alert(a); //1
var a=3;
alert(a); //3
function a(){alert(2)};
alert(a); //3
a();     //报错


第二种:

var b=1;
function fn1(){
    alert(b);
    var b=2;
}
fn1();     //undefined
alert(b);  //1

模拟解析器解析过程

1)“找一些东西”:var function 参数

     1.b=undefined

     2.fn1=function fn1(){

         alert(b);

         var b=2;

     }


2)逐行解读代码

     表达式:

     函数调用:(在函数内部再次进行预解析操作)

      2)1)

        “找一些东西”:var function 参数

         b=undefined;

       2)2)逐行解读代码

         将函数内部的b赋值为2,外部b无变动 所以为1;


第三种:

var b=1;
function fn2(){
    alert(b);
    b=3;
}
fn2();    // 1  
//此函数里解析器由于未找到 b变量,
//通过作用域链往上找到b变量1 ,在往下执行b赋值操作 ,
//赋值的也是最外部的变量 b
alert(b);  //  3


第四种:

var b=1;
function fn2(b){
    alert(b);
    b=3;
}
fn2(); //undefined     
// 找到参数b,将b赋值undefined,执行alert弹出undefined,执行b=3;
// 先在本身函数作用域里面找是否存在变量b,找到之后将函数b赋值3。最外部b未变动
alert(b);  // 1


第五种:

var b=1;
function fn2(b){
    alert(b);
    b=3;
}
fn2(b);     // 1 
// 参数相当于赋值操作,
// 逐行执行代码 
// 1.将函数内部变量b赋值undefined,
// 2.将函数内部变量b赋值1,
// 3.将函数内部变量b赋值3,
// 4.从始至终改的都是函数内部变量b,全局变量b未变动;

alert(b);  //  1 全局变量b



外部获取函数内部值

1.

var str='';
function fn1(){
    var a="测试";
    str = a;
}
fn1();
alert(str);


2.

function fn1(){
    var a="测试";
    fn2(a);
}
function fn2(b){
    alert(b);
}
fn1();