角度模块功能:使用var?

时间:2016-09-02 18:11:27

标签: javascript angularjs

我对Angular很新,但我在我的应用程序中调试的最近一个问题如下:

假设我将新指令附加到另一个.js文件中定义的现有模块。当我使用以下语法时:

angular
.module('myApp')
.directive('ratingStars', ratingStars)
;

var ratingStars = function(){
  return {
    restrict: 'EA',
    scope: {thisRating : '=rating'},
    templateUrl: '/my.template.html'
  };
};

我会得到一个错误,沿着“Argument'fn'不是函数,未定义”。

但是,我可以使用以下代码修复代码(请注意直接使用函数而不是赋值给var。)

angular
.module('myApp')
.directive('ratingStars', ratingStars)
;

function ratingStars(){
  return {
    restrict: 'EA',
    scope: {thisRating : '=rating'},
    templateUrl: '/my.template.html'
  };
}
  

获取函数和赋值给var之间的逻辑区别是什么,而不是直接定义函数?   是否有某种变量悬挂?我的var只是那个文件的本地吗?

非常感谢。

1 个答案:

答案 0 :(得分:5)

top hoisting相关。

  

获取函数和赋值给var之间的逻辑区别是什么,而不是直接定义函数?

在第一个脚本中,

您的脚本解释如下。

var ratingStars;

angular
    .module('myApp')
    .directive('ratingStars', ratingStars);

ratingStars = function() {
    return {
        restrict: 'EA',
        scope: { thisRating: '=rating' },
        templateUrl: '/my.template.html'
    };
};

所以,你可以看到, var ratingStarsdeclared first and assigned it to the directive definition。因为使用var声明的JavaScript中的变量在block scope或全局函数范围内被提升范围。 But actual definition will occur after that

在第二个脚本中

您的function definition将在全局代码的顶部定义。 所以,它得到了正确的解释。

所以,首先使用function expression variable getting top hoisted

not actual function definition和第二个使用function defination

其中function defination itself getting top hoisted