JavaScript | Angular |控制器作为语法：不能使用“this”

Question

不能使用 ControllerAs this

谁能给我解释一下下面的场景吗？

有效

ng-controller="Parent as thus"

休息

ng-controller="Parent as this"

使它成为关键字的那个字母——我想要的——破坏了森林。

这是为什么？

P.S。我知道 vm 约定，但我发现它扰乱了 controllers/viewmodels.

的可移植性

Answer 1

您不能使用 this 作为实例名称。 this 是保留关键字。

这相当于做：

var this = new Controller();

你可以看出这是错误的。它应该是这样的：

var ctrl = new Controller();

这基本上就是 angularJs 在您执行 controllerAs="Controller as ctrl"

时在幕后所做的

Answer 2

问题当然不是this是JavaScript中的保留字。 controller as 语法中没有规则表明您需要将 this 的值分配给与控制器同名的变量，我敢肯定angular也不会做这种事。为什么会这样？ Function 构造函数的使用是非常愚蠢的，而且只是一个不必要的错误。

有一种简单的方法可以测试 JavaScript 保留字不是这里的问题。将您的控制器命名为 "throw"。 "Parent as throw"。 throw 是一个保留字，但是 会抛出 错误吗？不，那有用吗？是的。

然而，

this 在 angular 自己的模板表达式的上下文中保留。用于引用表达式的当前scope。

<div ng-controller="Parent as this">
    {{log(this)}}
</div>


angular.module('testApp', []).controller('Parent', function($scope){
    this.test = 'foo';
    $scope.log = function(arg){
        console.log(arg);
    };
});

以上不会抛出错误，但也不会记录控制器。相反，它将记录一个 scope 对象，其中包含 log 函数和 $parent 等等。

事实上，它还会包含一些我们感兴趣的东西：属性 this: Object，我们的控制器。

果然，将模板表达式更改为 {{log(this.this)}}，它会很好地记录控制器实例。仍然不会使用 'this' 作为名称，它可能只会导致比未定义的函数更多的错误。