AngularJS: Verwirren über Objektverweis in $ scope

Question

Hier ist mein Code:

<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> 

Wenn ich auf die <h1>, ich setzen Sie das p Objekt, so erwarte ich leer in der h1-Tag.

Da ich denke, die Variable hat die gleiche Referenz wie $scope.person, die auf das gleiche Objekt zeigen.

In der Tat hat sich nichts geändert, als ich klickte, nur wenn ich die $scope.person = {} zurücksetzen.

Warum funktioniert es nicht so, wie ich es erwarte? Was ist falsch in meinem Denken?

Answer 1

Das hängt nicht mit Angular zusammen, sondern wie Objekte in JavaScript manipuliert werden.

Sie haben Recht, wenn Sie sagen, dass und $scope.person beide auf dasselbe Objekt im Speicher verweisen.

jedoch, wenn Sie p = {} schreiben Sie das Objekt nicht berühren, dass p zeigte auf, das Sie haben p Referenz ein neues Objekt, daher ist es nicht $scope.person mehr.

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

Wenn Sie die name Eigenschaft p/$scope.person entfernen möchten, können Sie schreiben

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