这个 Angular JS 代码片段是如何工作的？

Question

为什么以下代码片段在 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 意味着它没有被吊起。

Answer 1

.controller 注册一个控制器函数但不会立即执行它 - 它会将它排入队列以供稍后阶段使用。然后，student变量被赋值一个对象。

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

相比之下，第二个例子的console.log，无论是否包含在立即调用的函数表达式中，都执行before student 变量被赋值，所以它是 undefined.

Answer 2

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

两个例子都被立即调用，但是第二个函数试图立即访问尚未定义的外部变量，第一个函数只是执行一个函数来注册控制器（因此，不执行控制器功能的内容）。

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

这个 Angular JS 代码片段是如何工作的？

How does this Angular JS code snippet work?

javascript

angularjs

debugging

hoisting