AngularJS:混淆 $scope 中的对象引用

Question

这是我的代码:

<div ng-controller="TestController">
    <h1 ng-click="click()">{{person.name}}</h1>
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        var p = $scope.person = {
            name: 'Br'
        };

        $scope.click = function () {
            p = {};
        }
    });
</script>

当我点击 <h1> , 我重置了 p对象，所以我希望 h1 中为空标签。

因为我认为变量 p与 $scope.person 具有相同的引用, 指向同一个对象。

事实上，当我点击时没有任何改变，只有当我重置 $scope.person = {} .

那么为什么它没有像我预期的那样工作呢？我的想法有什么问题吗？

Answer 1

这与 Angular 无关，而是如何在 JavaScript 中操作对象。

当你说 p 和 $scope.person 都引用内存中的同一个对象时，你是对的。

然而，当您编写 p = {} 时，您并没有触及 p 指向的对象，而是让 p 引用了一个新对象，因此它不再是 $scope.person。

var a = {};
var b = a;
a === b; // true
b = {};
a === b; // false

如果你想删除 p/$scope.person 的 name 属性，你可以这样写

delete p.name; // this will also delete $scope.person.name