javascript - 为什么 AngularJS 常量是可编辑的？

Question

我正在玩 AngularJS constants .我观察到我能够更改我使用的 constant 的值。那没有意义。为什么我能够更改常量的值？

我正在这样创建常量:

var app = angular.module('app', []);
app.constant('Type', {
  PNG: 'png',
  GIF: 'gif'
});
app.constant('serialId', 'aRandomId');

即使我使用 angular.value 创建常量，我仍然可以更改它。

要更改常量的值，我在我的 Controller 中这样做:

app.controller('MainController', [
    '$scope',
    'Type',
    'serialId',
    '$timeout',

    function ($scope, Type, serialId, $timeout) {
        $scope.data = {
            type: Type,
            serialId: serialId,
        };

        $timeout(function () {
            Type.PNG = 'this is changed';
            serialId = 'new Serial Id';
            console.log(serialId);
        }, 1000);
    },
]);

但是“常量”的定义是我得到的是常量。它的值不会改变并且具有固定值。 MDN说一旦你声明了常量，如果常量不是对象，你就不能改变它。

例如:

const x=10;
x=20; //will throw an error.

const obj={};
obj.a='ab'; //will not throw an error.

但是对于 AngularJS 常量，没有什么可以阻止我更改值。它甚至不通知值已更改。但是他们的文档并没有谈到改变常量的值。

TL;DR:如果我们可以像普通 JavaScript 变量一样更改 AngularJS 常量的值，那么为什么将它们称为常量？

这是一个 fiddle进行演示。

Answer 1

有以下区别:

• 值类型(字符串、 bool 值等)；和
• 引用类型(对对象、数组等的引用)；

变量可以是任何一种类型。

常量变量之所以称为“常量”，是因为您无法更改它们的内容:您无法分别设置新值或引用。

换句话说，因为引用类型是常量，这意味着您不能更改该变量以使其引用其他内容。 如您所述，您可以更改引用变量指向的任何对象的内容。

如果你想让一个对象本身“常量”，你可以使用Object.freeze:

var app = angular.module('app', [])
  .constant('Type', Object.freeze({ PNG: 'png', GIF: 'gif' }))
  .constant('SerialId', 'asdfgh12345')
  .controller('myController', ['$timeout', 'Type', 'SerialId', MyController]);
  
function MyController($timeout, Type, SerialId) {
  var vm = this;
  
  // This .data property nor its properties are constant or frozen...
  vm.data = {
    type: Type,
    serialId: SerialId
  };
  
  $timeout(function() {
    Type.PNG = 'this is changed in timeout';
    SerialId = 'changed serial id in timeout';
  }, 1000);
  
  $timeout(function() {
    var el = document.getElementById('x');
    var injector = angular.element(el).injector();
    vm.secondData = {
      type: injector.get('Type'),
      serialId: injector.get('SerialId')
    }
  }, 2000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<div ng-app="app" ng-controller="myController as vm" id="x">
  <pre>{{ vm | json }}</pre>
</div>

注意 Object.freeze does not do so recursively ，你需要一个函数/库。

另请注意，我偷偷加入了一些关于 SerialId 的评论。首先，意识到存在名为“SerialId”的三个不同的东西:

1. Angular 常量名称“SerialId”；
2. 一个名为“SerialId”的函数参数；
3. 依赖项数组中的第三项(字符串)，“SerialId”；

当 Controller 构造函数运行时，函数参数将填充常量的值。顺便说一下，函数参数也可以命名为 Foo。您应该将该参数视为具有与常量相同值的局部非常量变量。