JavaScript |角 |控制器作为语法：不能使用 `this`

Posted 2023-02-23

【中文标题】JavaScript |角 |控制器作为语法：不能使用 `this`

【英文标题】：JavaScript | Angular | Controller As Syntax: Cannot Use `this`

【发布时间】：2016-11-13 21:47:32

【问题描述】：

不能使用 ControllerAs this

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

作品

ng-controller="Parent as thus"

休息

ng-controller="Parent as this"

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

这是为什么？

附：我知道vm 约定，但我发现它扰乱了控制器/视图模型的可移植性。

【问题讨论】：

但我发现它会干扰控制器/视图模型的可移植性？你能解释一下“这个”吗？没有双关语

我猜 Angular 会尝试评估传入的字符串，而 this 是保留字。

就架构而言，耦合到您的 base-lib/framework 是一种不好的做法。因此，您可能希望将通用 Viewmodel 从系统移植到系统。我发现vm 方法在端口发生时会产生一定程度的变更成本。例如，如果我采用了用于所有项目的通用CalendarViewmodel，我将不得不遍历this 的所有引用并将其转换为vm；只为那个控制器。这是一个过于简单的例子，它只是众多例子之一。这里还有很多要说的。

【参考方案1】：

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

有一个简单的方法可以测试 JavaScript 保留字不是这里的问题。将您的控制器命名为“throw”。 "Parent as throw"。 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' 作为名称，但它可能只会错误地导致比未定义的函数更多的错误。

【讨论】：

虽然这肯定会提供更多信息，但它仍然没有给出关于 为什么 AngularJS 拒绝解析关键字的明确答案。

啊！多么美丽的答案。感谢 [big time] 的帮助。

@DavidL 是什么让您认为 Angular 无法解析它？在上面的示例中，angular 肯定会解析“Parent as this”表达式。它只是拒绝覆盖模板范围内单词this 的值。这可能有很多原因，从设计决策到实施细节。还是您遇到了我不知道的实际错误？

“然而，这是在 Angular 自己的模板表达式的上下文中保留的”。我要说的是，理想情况下，这一主张将得到证明这一点的来源的支持。过滤器显然应用在表达式语法的某个地方，它的来源会很棒。否则，您的解释完全合理。

@noppa，我想你指的是我的最后一句话，但这只是一厢情愿。实际上，我认为他们这样做是最好的方式，以便封装变化的内容。我认为您仍然需要范围/原型链，这可能需要将this 作为标记的上下文。我认为我们完全同意 ;)

【参考方案2】：

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

这相当于做：

var this = new Controller();

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

var ctrl = new Controller();

这本质上是 angularJs 在你做 controllerAs="Controller as ctrl" 时在幕后所做的事情

【讨论】：

好吧，我认为 Angular 所做的更像是var hash = ; hash['this'] = new Controller();——这是完全合法的语法。您确实可以将实例变量引用为this.this。

Controller as ctrl 在控制器主体中内部定义了$scope.ctrl = this;。