JavaScript 作用域和 Angular JS 作用域之间的区别是什么?

what is the diference between javascript scope and angular js scope

本文关键字：作用域 区别 是什么 JS Angular JavaScript 之间      更新时间：2023-09-26

我正在尝试学习JavaScript Scope和Angularjs scope之间的区别。当我在网上搜索并在 SO 中发现 JavaScript 中的范围有两个范围：全局和局部，他们提到了变量，但在 Angular 中，$scope是我不清楚的应用程序对象，有人可以帮助我举例说明什么是范围.....我想知道范围是否只有这个词是相同的，因为两种技术是不同的，请解释一下

谢谢

JavaScript

JavaScript 中的范围是特定代码段可以访问的变量。它包括当前函数中的变量、任何包含函数中的变量以及所有全局变量。

例如，这里有一个简单的JavaScript，它显示了特定代码段范围内和不在范围内的一些变量：

<script type="text/javascript">
    var a = 1; // in scope
    function W() {
        var b = 2; // not in scope
    }
    function X() {
        var c = 3; // in scope
        function Y() {
            var d = 4; // not in scope
        }
        function Z() {
            var e = 5; // in scope
            // here is my code
            // it has access to a, c, and e
            a = c + e;
        }
    }
</script>

函数Z中的代码可以访问变量a、c和e，但不能访问b或d。

AngularJS

AngularJS实现了MVC模式的变体。$scope变量是模式的"模型"部分。分配给$scope的属性将成为对该范围的 HTML 可见的变量。

例如，考虑这个简单的例子：

app.controller('MyController', function ($scope) {
    $scope.message = 'Hello Cleveland!';
}

.

<div ng-controller="MyController">
    <span>{{message}}</span>
</div>

您在控制器中分配$scope.message，它在 HTML 中显示为message。

Angular 中的 Scopes 的行为也类似于 JavaScript 中的 scope，因为它们继承自父级。在 Angular 中，应用程序中的所有$scope都继承自$rootScope。每个控制器创建一个新作用域，该作用域是根作用域的子作用域，子作用域通常由指令创建。例如，ng-if 指令创建一个子作用域。

app.controller('MyController', function ($scope) {
    $scope.message = 'Hello Cleveland!';
    $scope.show = true;
}

.

<div ng-controller="MyController">
    <div ng-if="show">
        <span>{{message}}</span>
    </div>
</div>

在此示例中，span实际上位于 ng-if 创建的子作用域中，但它仍然可以访问 message 属性，因为它从其父级继承了该属性。

同样，可以具有不交互的同级作用域。

例如，假设您有两个控制器"Ctrl1"和"Ctrl2"：

app.controller('Ctrl1', function ($scope) {
    $scope.message = 'This controller is #1';
}
app.controller('Ctrl2', function ($scope) {
    $scope.message = 'This is the second controller';
}

.

<div ng-controller="Ctrl1">
    <span>{{message}}</span>
</div>
<div ng-controller="Ctrl2">
    <span>{{message}}</span>
</div>

message变量在每个变量中都是不同的，因为两者之间没有继承关系。

差异

JavaScript 和 Angular 中的 scope 行为之间有一个显着的区别。此行为是由于 Angular 中的作用域使用原型继承。关于这一点已经写了很多，所以我不会详细介绍，但要记住的重要一点是：

更改子作用域中的变量不会影响父作用域中的同名变量。

每个子作用域有效地获取其自己的所有继承属性的副本。当子作用域修改它时，它只会修改其副本，而不修改父作用域的副本。

在 JavaScript 中并非如此。在第一个示例中，Z 函数为全局a变量赋值。此更改对所有代码都可见。在Angular中并非如此。

相关文章：