Einführung in die prototypische Vererbung von JavaScript
In AngularJs gibt es eine bidirektionale Datenbindung, aber nicht jede Änderung führt zu einem entsprechenden Effekt. Manchmal kann dies passieren, wenn der Wert eines Basistyps übergeben wird. Diese Situation sollte auch in JavaScript selbst vorhanden sein. Ich werde zuerst eine Lücke graben und sie füllen, nachdem ich JavaScript gut gelernt habe.
Das obige Bild ist das Prototyp-Vererbungsdiagramm von JavaScript. Die Unterklasse erbt die Attribute der übergeordneten Klasse Die übergeordnete Klasse greift auf die Prototypenkette zu, d. h., sie geht Schicht für Schicht nach oben, bis Sie die Attribute in der übergeordneten Klasse finden. Wenn Sie jedoch einer Eigenschaft eines Basistyps in einer Unterklasse direkt einen Wert zuweisen, wird nicht auf die Prototypkette zugegriffen, d. h., eine neue Eigenschaft mit demselben Namen wird in der Unterklasse und die Eigenschaften in der übergeordneten Klasse erstellt Auf die Klasse wird bei erneutem Zugriff nicht zugegriffen. Beim Zugriff auf ein von einer übergeordneten Klasse geerbtes Objekt wird auf die Prototypenkette zugegriffen.
childScope.aString === 'parent string' //true 访问了原型链 childScope.aNumber === 100 //true 访问了原型链 childScope.aNumber = 20 //不访问原型链，子类中将增加一个新属性，值为20 childScope.aString = 'child string' //不访问原型链，子类中将增加一个新的属性，值为 child string childScope.anArray[2] = 100 //访问了原型链，父类中的anArray对象中第三个值被修改
Testen von ng-repeat, ng-switch und ng-include in AngularJS
<!DOCTYPE html>
<html ng-app="TestScopeModule">
<head>
<script src="**/angular.js"></script>
<script src="scopeTest.js"></script>
<script type="text/ng-template" id="login">
<button ng-click="login()">login</button>
<input type="checkbox" ng-model="loginData"/>
<a href="#" ng-click="showScope($event)">switch's child scope,ng-include scope</a>
</script>
<script type="text/ng-template" id="logout">
<button ng-click="logout()">logout</button>
<input type="checkbox" ng-model="loginData"/>
<a href="#" ng-click="showScope($event)">switch's child scope,ng-include scope</a>
</script>
<script type="text/ng-template" id="login1">
<button ng-click="login1()">login</button>
<input type="checkbox" ng-model="parent.loginData"/>
<a href="#" ng-click="showScope($event)">switch's child scope,ng-include scope</a>
</script>
<script type="text/ng-template" id="logout1">
<button ng-click="logout1()">logout</button>
<input type="checkbox" ng-model="parent.loginData"/>
<a href="#" ng-click="showScope($event)">switch's child scope,ng-include scope</a>
</script>
</head>
<body>
<div ng-controller="TestScopeCtrl">
<div ng-repeat="item in list1">
<label>Input {{$index+1}}</label>
<input type="text" ng-model="item"/>
<a href="#" ng-click="showScope($event)">parent scope's child scope</a>
</div>
<div>
{{list1}}
</div>
<hr/><hr/>
<div ng-repeat="item in list2">
<label>input{{$index+1}}</label>
<input type="text" ng-model="item.text"/>
<a href="#" ng-click="showScope($event)">parent scope's child scope</a>
</div>
<div>
{{list2}}
</div>
<hr/><hr/>
<div>
<a href="#" ng-click="showScope($event)">parent scope</a>
</div>
<hr/><hr/>
<div ng-switch on="loginData">
<div ng-switch-when="false"><a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope</a><div ng-include="'login'"></div></div>
<div ng-switch-when="true">
<a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope, different with false case</a>
<div ng-include="'logout'">
</div>
<a href="#" ng-click="showScope($event)">parent scope, not switch scope</a>
</div>
<hr/><hr/>
<div ng-switch on="parent.loginData">
<div ng-switch-when="false"><a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope</a><div ng-include="'login1'"></div></div>
<div ng-switch-when="true">
<a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope, different with false case</a>
<div ng-include="'logout1'">
</div>
</div>
</div>
</body>
</html>
var TestScopeModule = angular.module('TestScopeModule', []);
TestScopeModule.controller('TestScopeCtrl',['$scope',function ($scope) {
$scope.list1 = ['value1','value2', 'value3'];
$scope.list2 = [{text : 'value1'},{text : 'value2'},{text : 'value3'}];
$scope.showScope = function (e) {
console.log(angular.element(e.srcElement).scope());
};
$scope.loginData = false;
$scope.parent = {};
$scope.parent.loginData = false;
$scope.login = function () {
$scope.loginData = true;
};
$scope.logout = function () {
$scope.loginData = false;
};
$scope.login1 = function () {
$scope.parent.loginData = true;
};
$scope.logout1 = function () {
$scope.parent.loginData = false;
};
}])Das Obige ist ein kleiner Teil des Testcodes, der ng-repeat testet , ng bzw. -switch und ng-include, die Testergebnisse werden im Code markiert, dh der Bereich des untergeordneten Bereichs und des übergeordneten Bereichs.
Attribute und Werte im übergeordneten Bereich
First ng The Der erste untergeordnete Bereich in -repeat verfügt über eigene Elementattribute und Werte im Bereich. Da es sich um einen Basisdatentyp handelt, wird beim Ändern des Werts nicht auf die Prototypkette zugegriffen, sodass er sich vom Wert im übergeordneten Bereich unterscheidet . ng-repeat generiert mehrere untergeordnete Bereiche und jeder untergeordnete Bereich verfügt über ein eigenes Elementattribut.
Der erste untergeordnete Bereich im zweiten ng-repeat hat seine eigenen Elementattribute und Werte im Bereich. Das Element hier ist ein Objekt, also ändern Sie das Element in Das Objekt. Der Wert greift zuerst auf die Prototypenkette zu, daher ist er derselbe wie der Wert im übergeordneten Bereich
Im von ngswitch generierten untergeordneten Bereich können Sie das sehen $parent ist der übergeordnete Bereich. Da nginclude hier in ngswitch verwendet wird, generiert nginclude auch einen eigenen Bereich, sodass es childHead und childTail gibt. ngswitch generiert Bereiche in zwei Fällen: wahr und falsch. Es handelt sich um zwei verschiedene Bereiche mit unterschiedlichen ID-Nummern.
Dies ist der von nginclude in ngswitch generierte untergeordnete Bereich. Sie können sehen, dass die $id von $parent 12 ist, was der ID des von ngswitch generierten Bereichs entspricht.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
