Javascript - 预编译与函数词法作用域

预编译与函数词法作用域(Precompiled & Scoped)

预编译

Javascript脚本的宿主在执行代码之前对脚本做了预编译处理,比如浏览器对Js进行了预编译,编译器会扫描所有的声明(变量、函数、对象,无论它们是否嵌套在其他函数中,都会被扫描),对声明进行编译,编译期间会忽略任何可执行的语句,直到编译结束后才会调用解释器对代码进行执行。

1.为声明的变量(变量式函数被视为变量)划分内存空间,标识符=Undefined(未初始化),执行时才会发生初始化。

2.为所有声明式函数划分内存空间,空间保存了代码体,但代码体的变量被设为Undefined。

var aa = 10;    
aler(aa); //print 10
var aa = 20; 
alert(aa);//print 20

var bb = function () {
    alert("hello");
}

bb();//print hello

var bb = function () {  
    alert("world");
}

bb();//print world

function fun() {
    alert("sam");
}

fun();//print leo,由于编译器会将声明式函数的代码体存储在内存中,所以最后一个声明的fun的代码体就覆盖了前一个

function fun() { 
    alert("leo");
}

函数词法作用域

1.闭包的作用域

Js中只有闭包才会遵循子承父的原则,也即闭包函数可以获取在父函数里定义的变量,但父函数不能获取闭包函数中定义的变量,闭包中的变量只在闭包中有效。而在浏览器中,你定义的任何函数都是作为window的构造函数的闭包。

var aa = function () {
    alert(x)
    function bb() { var x = 10 }
}
aa()//return x未定义,因为x只在闭包函数bb的作用域内

var aa = function () {
    var x = 10
    function bb() {alert(x) }

aa()//alert 10

function aa() {
    var t = "s"
    window.say = function () { //全局的say方法,同时又作为了aa的闭包
        alert(t); //t在哪里被定义?当前函数未定义,于是向上查找,发现t在aa中定义
    }
    window.say();
}

aa(); //由此可见全局函数作为闭包使用时,变量作用域的查找也是按照逐层向上的规则进行的

2.块的作用域

Js的块作用域是开放的,也即没有子承父的原则,在一个函数中的子块里定义的变量,父块也可以访问,但离开函数的作用域,则不能再访问。此处需要明确函数闭包作用域和块作用域的区别,前者的父函数不能访问闭包函数里的变量,后者的函数可以访问其代码体内的任意块里的变量。

function aa() {
    for (var i = 1; i < 11; i++) {
        var g = 100;
    }
    alert(g); //可以访问到g
}
aa();

这与C#不同。为了不引起混乱,建议在函数代码体一开始的位置就把需要用到的变量都声明一次,不要在分支语句中创建临时变量,除非有必要这样做。

function aa() {
    if (true) { var x = 100; } //子块       
    { var y = 200; } //子块
    alert(x); //print 100
    alert(y); //print 200
}

aa();

3.作用域查找

假设声明了一个全局变量,而后又在某个函数中声明一个与全局变量同名的变量,那么在在函数中试图输出这个变量时,应该输出全局变量还是局部变量呢?答案是局部变量,因为解释器执行到输出变量时,它会问自己,这个变量再哪里被定义的,首先它会采取就近原则,先查找该变量是否在当前作用域中被定义,如果有则获取它,否则逐层向上查找祖先作用域,直到找到为止,如果任何作用域都找不到该变量,则会报错。

var global = "global"; //全局global
function f() {
    alert(global);
    var global = "part";
    alert(global); //print "hello"
}

f();
//预编译:全局blobal赋值undefined,内存存储函数f的代码体,代码体alert(undefined),再声明一个局部blobal=undefined,再alert(undefined)
//解释执行:全局global="global",调用函数f,代码体内部alert(undefined),因为查找是就近原则,当前函数内部定义了一个global,但此时在内存中其值为undefined
//所以第一次会弹出提示框显示undefined,接下来为局部变量global赋值,也即为已经存在于内存中的局部blobal赋值为part,最后执行弹出框显示global的值为part

4.深入理解作用域

function initAnchors() {
    var i;
    var anchor;
    for (i = 1; i <= 3; i++) {
        anchor = ADS.$("anchor" + i); //根据ID获取超链接元素
        ADS.addEvent(anchor, "click", function () { //为每一个超链接绑定click事件
            alert("my ID is" + i);
        })
    }
}

ADS.addEvent(window, "load", initAnchors);
//当点击任何超链接时,都输出3
//编译器编译时,代码体的i=undefined
//解释器执行时,每循环一次为超链接注册click事件,但事件并未触发,所以匿名的事件处理函数其在内存中的代码体中的alert('my id is undefined'),而循环完成后,i=3
//接下来,click发生,事件处理器开始执行,此时alert时,i=3

//要解决这个问题很简单,将注册事件的代码封装到另一个函数中:
function initAnchors() {
    var i;
    var anchor;
    for (i = 1; i <= 3; i++) {
        anchor = ADS.$("anchor" + i); //根据ID获取超链接元素
        registerEvent(anchor, i);
    }
}

ADS.addEvent(window, "load", initAnchors);
        
function registerEvent(linkObjArray, i) {
    ADS.addEvent(linkObjArray, "click", function () { //为每一个超链接绑定click事件
        alert("my ID is" + i);
    })
}

特殊值

1.xx未定义

所有未声明就被引用的变量=xx未定义。

2.undefined

所有已声明但未赋值的变量/无返回值的函数=Undefined。Undefined==null。

3.null

null本身就是一个对象,所以它可以赋值给任何变量而不会抛错,这个对象不能定义任何属性与方法,它表示空。null!="",null !=0,但1 + null = 1。

4.false

false == 0,false="   ",0="",false != null。

5.NaN

not a number的意思,即非数字。

Javascript - 学习总目录

上一篇:Can a Tomcat docBase span multiple folders?--转


下一篇:学习笔记_springmvc返回值、数据写到页面、表单提交、ajax、重定向