Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of Scope inheritance in Angular.JS, which is very detailed and has certain reference value. Friends who are interested must finish it!

Basic principles

In JavaScript, each time a constructor (constructor) is created, a property prototype pointing to the prototype object is also generated for that function. Each prototype object gets a constructor property that points to the corresponding constructor, and other properties and methods of the prototype object are inherited from Object. Each instance created by the constructor contains an internal property [[Prototype]] that points to the constructor prototype object (usually implemented as _ _ proto__ in the browser). The relationship among constructor, prototype object and instance is as follows (image source: JavaScript Advanced programming (3rd Edition)):

Person1 and person2 create two instances of the constructor Person, and you can access the prototype object Person Prototype through the [[Prototype]] property to get all the methods and properties defined in the prototype. The prototype property of the Person constructor also points to the Person Prototype prototype object. These concepts are the basis for understanding prototype inheritance. Let's look at the concept of prototype chain. What happens if you assign an instance of a type to a prototype object? According to the relationship in the figure above, the prototype object at this time contains properties that point to another prototype, while the other prototype also contains properties that point to another constructor.

The effect is as follows:

SuperType is a parent type. In the prototype, property property and method getSuperValue;SubType are defined as a subtype, and property subproperty and method getSubValue are defined. Instance is an instance of SubType. Here, change the prototype object of SubType into an instance of SuperType object through the following key code:

SubType.prototype = new SuperType (); SubType.prototype.getSubValue = function () {return this.subproperty;}

We can see that the SubType prototype object has the property property from the SuperType instance object and the getSubValue method defined on the prototype. Through the [[Prototype]] property, you can further access the members of the SuperType prototype object. If the SuperType prototype is also assigned to an instance of a certain type, and so on, it can be traced all the way up through the [[Prototype]] property to form a prototype chain that leads directly to the Object prototype object. The above example shows only the first two links of the chain.

Through the implementation of the prototype chain, the instance of SubType inherits all instance members and prototype members of the SuperType instance. For example, to access instance.getSuperValue, first search within the instance instance and there is no such method; then backtrack up through the prototype chain to find the SubType prototype object without this method; and then continue backtracking through the [[Prototype]] property to the prototype object of SuperType to find the method.

The method of inheritance described above is prototype inheritance. After ES5, you can use the create method provided by Object to standardize the above process, which can be found here for details. The implementation of AngularJS's Scope inheritance relationship is similar to the above process.

Scope inheritance implementation

In Angular, the child Scope that wants to define a Scope can be implemented through the scope.$new method, and the implementation of the $new method itself embodies the idea of prototype inheritance. First, the $new method accepts two parameters: isolated and parent. The first parameter indicates whether the created child scope is an isolated. The isolated scope does not inherit the prototype of parent scope, but belongs to its child scope on the hierachy, which is the basis of the Digest process. One of the benefits of isolated scope is to prevent members of parent scope from being changed, which is useful in the implementation of directive. The second parameter specifies the parent scope of the created child scope, which, if not specified, defaults to the scope that currently calls the $new method. The implementation of $new in Angular is similar to:

$new: function (isolate, parent) {var child; parent = parent | | this; if (isolate) {child = new Scope (); child.$root = this.$root;} else {if (! this.$$ChildScope) {this.$$ChildScope = createChildScopeClass (this);} child = new this.$$ChildScope ();} child.$parent = parent; / /. Return child;}, / /...

As you can see, if isolate is true, use the Scope type constructor to create a child object. If isolate is false or is not specified, a child scope prototype is created that inherits from the current scope, a process implemented by the constructor provided by createChildScopeClass:

Function createChildScopeClass (parent) {function ChildScope () {this.$$watchers = null; this.$$listeners = {}; / /...} ChildScope.prototype = parent; return ChildScope;}

The ChildScope type is defined here, including the properties it requires. Then set the prototye property of this type to the incoming scope instance (that is, the previous this), which is the prototype inheritance described earlier. The scope objects created through ChildScope are prototyped and inherited from parent, that is, all members of parent scope can be accessed. Combined with the code for $new, if the child is not isolated, child can access all members of the current scope object (for example, methods such as $digest,$apply and custom members). This explains that in the scope corresponding to the controller we created, we can access the members provided by $rootScope, because our final scope prototype inherits from root scope and can be traced up to the instance of root scope through the prototype chain.

In the previous article, I talked about the Digest process in Angular. When you call the scope.$apply method, you actually start with root scope, calling the $digest method of each scope according to the hierarchy of scope. This is why the $root property is set in the constructor of Scope:

Function Scope () {this.$parent = null;//... This.$root = this; this.$$destroyed = false; this.$$listeners = {}; / /.}

For general child scope,$root, it is inherited by prototype, and after root scope construction, subsequent scope can access the $root object, that is, the root scope object. For isolated scope, since it is created through the Scope constructor (non-prototype inheritance), $root is overridden by child scope, so you need to set the $root property to the $root property of parent, as in the previous implementation of $new. This ensures that you can always get an instance of root scope in any scope, and you can complete the top-down Digest process. In the implementation of methods such as $apply, use $rootScope instead of $root, both of which are the same:

Apply: function (expr) {beginPhase ('$apply'); try {return this.$eval (expr);} finally {clearPhase ();} finally {$rootScope.$digest ();}}, / /.

RootScope is the Scope type instance provided by $RootScopeProvider and is the first initialized scope object. In development, we can use child scope as follows:

.controller ('smallCatCtrl', [' $scope', function ($scope) {var child = $scope.$new (); child.text = 'cat'; var child1 = $scope.$new (true); child1.value = 0; var child2 = $scope.$new (true, child); child2.value = 1; child2.$watch (' value', function (oldValue, newValue) {console.log ('child2.value changed');}) Child1.$watch ('value', function (oldValue, newValue) {console.log (' child1.value changed');}) child.$watch ('text', function (oldValue, newValue) {console.log (' child.text changed');}); console.log (child2.text);}])

In this code, you first create a child scope----child of $scope, without specifying a parameter to $new, meaning that the child prototype inherits from $scope. At the same time, the property text of child is defined. Next, create the second child scope----child1 of $scope, and the parameter passed in $new requires child1 to be isolated scope and, hierarchically, a descendant of $scope. At the same time, its value property is defined. Finally, create a scope child2, which is also an isolated scope, except that it takes child as a hierarchical parent scope.

The output of this code is as follows:

First of all, child2 only inherits from child in the hierarchy, so it does not take the child instance as a prototype, so there is no text attribute, and the first line outputs undefined.

Because the Digest process follows the scope hierarchy from top to bottom, it is similar to the depth traversal process of the tree. In this case, the order of scope is $scope- > child- > child2- > child1, so the output of the three watch listener functions is also in the above order.

The above is all the content of the article "sample Analysis of Scope inheritance in Angular.JS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.