这个Angular JS代码片段如何工作?

时间:2015-09-17 04:36:08

标签: javascript angularjs debugging hoisting

为什么以下代码段在Angular JS中有效?

var app = angular.module('store',[]); 



(function(){
    app.controller('StoreController',function(){
        this.blabla = student;
    });
})();

var student = 
{
    name:"Abc Def",
    rollNumber:12,
    isBrilliant: true,
    isMale:false,
    isFemale: false,
    istest:true
};

即使student位于使用它且student未被提升的功能之后,为什么上述功能仍有效?

但与上面的例子相反,这一个:

(function(){
        console.log("Name is :"+student);
    })();

    var student = {
        name:"xyz"
    };

student显示为undefined表示它未被提升。

2 个答案:

答案 0 :(得分:8)

.controller注册一个控制器函数,但不立即执行它 - 它将它排入后续阶段。然后,为student变量分配一个对象。

然而,该控制器函数是对student变量的闭包 - 换句话说,它在运行时可以访问它。 Read more about closures。因此,当它最终执行时,student变量已定义。

相比之下,第二个示例console.log,无论是否包含在立即调用的函数表达式中,都会在之前执行 {{ 1}}已分配变量,因此它是student

答案 1 :(得分:5)

第一个示例和第二个示例之间存在细微差别。在第一个例子中,有两个功能块,在第二个例子中,只有一个。

两个示例都是立即调用的,但是第二个函数立即尝试访问尚未定义的外部变量,第一个仅执行注册控制器的函数(因此,不执行控制器功能的内容。)

当角度框架调用控制器的构造函数时,外部变量已被定义,并且是闭包环境的一部分。