Angular.JS范围的传承有深刻的理解

前言

在AngularJS之间的继承关系的范围是使用Javaｓｃｒｉｐｔ原型继承实现。本文讨论基于AngularJS Scope的实现原型继承机制和相关的数据。让我们看一看详细的介绍。

基本原理
在Javaｓｃｒｉｐｔ中，每创建一个构造函数（constructor）给出了函数的一个性质的原型，点在同一时间原型对象。每一个原型对象中获取一个构造函数属性指向相应的构造函数，和原型对象的其他属性和方法的对象继承。每个实例创建的构造函数包含一个内部属性{ { } }的原型，这是通常被称为浏览器__proto__。构造方法之间的关系，原型对象和实例三实例如下（图片来源：javaｓｃｒｉｐｔ高级编程（第三版））：
甲和2两实例创建的人，这可以通过{ { } }属性获取原型的所有方法和属性定义的原型人物原型。人的构造函数的原型属性也指向人原型原型对象。这些概念是理解原型继承的基础上，在这里看看我们的原型链的概念。如果一个类型的一个实例被分配到一个原型对象时会发生什么根据上面图表中的关系，此时的原型对象包含指向另一个原型的属性，而另一个原型包含指向另一个构造函数的属性。

效果如下：
超父类型。在原型中，定义了属性和方法getsupervalue。亚型的一个亚型，并定义了属性的子属性和方法getsubvalue。实例是类型的一个例子。在这里，通过以下关键代码，亚型原型对象转化为超类对象的一个实例：
subtype.prototype =新类型（）；
subtype.prototype.getsubvalue =函数（）{
返回this.subproperty；
}；
我们看到，亚型原型对象从父类实例对象的属性，以及对原型定义的getsubvalue方法。通过{ { } }原型属性，我们可以进一步访问父类型原型对象的成员。如果父类的原型也被分配到一个特定类型的一个实例，那么它可以追溯到通过{ } } {原型属性，这就形成了一个原型链连接对象原型对象。以上例子说明只有前两环链。
通过原型链的实施，对亚型实例继承了所有的实例成员和超类型的实例的原型成员。例如，如果你想去instance.getsupervalue，在实例实例一搜索，没有方法；然后原型链的背面朝上，发现亚型原型对象，也不是方法；然后再通过{ { } }属性类型的原型，来到原型对象，找到方法。
这种传承方式与上述原型继承。后ES5，可以规范流程使用创建的对象的方法。请参阅详细这，AngularJS范围继承关系实现类似上面的过程。
继承实施范围
在角度方面，我们希望定义一个范围的子范围，可以通过作用域实现。美元的新方法的实施，体现了原型继承的想法。首先，美元的新方法接受两个参数：分离和家长。第一个参数指示创建的子范围隔离（隔离），隔离范围不继承父域的原型，但属于它的子范围层次结构（层次），这是消化过程的基础上，利用分离的范围，避免了家长的成员范围的变化，这在执行指令时是有用的。二参数指定所创建的子范围，母的范围，如果没有指定，默认是到新方法当前呼叫的范围。为新的实施喉是相似的：
$新：函数（隔离，父）{
VaR的孩子；
这| |父母=；
如果（隔离）{
子=新范围（）；
子$ $ = root；
{人}
如果（！这childscope。$）{
This.$$ChildScope = createChildScopeClass (this);
}
这孩子=新childscope美元（）；
}
子$父=父；
…
返回的孩子；
}…
如您所见，如果隔离为true，则使用范围类型构造函数创建子对象。如果隔离为false或未指定，则创建子范围原型，该原型将从当前范围继承。This process is implemented by the constructor provided by createChildScopeClass:
功能createchildscopeclass（母）{
函数的ChildScope（）{
这个$ $守望者=空；
这一点…
}
childscope.prototype =母；
ChildScope回来了；
}
ChildScope类型的定义，包括它所需要的性能。这种类型的原型属性设置为输入范围实例（即以前的这个），这是先前描述的原型继承。然后通过ChildScope的范围对象都来自父母，那是遗传的，父母的范围内的所有成员可以访问。结合新的美元的代码，如果孩子不是孤立的，孩子可以访问当前范围内的所有成员对象（如美元美元消化，应用等方法和自定义成员）。这说明我们可以访问美元的范围对应于我们自己创造的控制器rootscope提供的会员，因为我们的范围从根范围最终原型继承，因此可以通过原型链追溯到根范围实例。
在前面的一篇文章中，我们讨论了角度的摘要过程，当调用范围方法时，它实际上是从根范围开始的，并根据范围层次结构调用每个范围的摘要方法：
函数作用域（）{
这一点…
这个；
这个。$ $ =销毁=假；
这个$ $监听器= {；
…
}
对于一般子范围，将通过原型继承获得$根。根范围施工后，后续的范围可以进入美元的根对象，即根范围对象。孤立的范围，因为它是由构造函数创建的范围（非原型的继承），$根被孩子的范围，为根属性设置为$母根属性，如前new.this美元实施保证我们总是可以在任何范围内得到根范围的实例，我们也可以完成自上而下的消化过程。In the implementation of $apply and other methods, $rootScope is used instead of $root, the two are the same.
$适用：函数（表达式）{
beginphase（$应用）；
{试
退货。$ eval（expr）；
{最后}
ClearPhase（）；
}
最后{
rootscope美元美元（）消化；
}
}…
rootscope美元是rootscopeprovider美元提供的范围类型的一个实例是第一个范围对象被初始化。在发展中，我们可以这样用孩子的范围：
控制器（'smallcatctrl，{
' $范围'，函数（$范围）{

var（= $）；
child.text =猫；

VaR的孩子=美元美元（真正的）新的范围；
child1.value = 0；

var $child2 =美元美元范围。新（真的，孩子）；
child2.value = 1；

美元的币值$child2。看（功能（属性的旧值，价值）{
console.log（' child2.value改变）；
}）；
孩子看。美元（币值的功能（属性的旧值，价值）{
console.log（' child1.value改变）；
}）
看孩子。美元（中，函数（属性的旧值，价值）{
console.log（' child.text改变）；
}）；
console.log（$child2。文本）；

}）；
在这段代码中，子范围----孩子$范围先创建无参数指定为新的，这意味着孩子的原型是继承了scope.at美元的同时，孩子的属性文本的定义。接下来，我们创建的第二子范围范围----孩子。进入新的美元需要参数孩子被孤立的范围，是对美元的层次结构范围的后裔。同时，定义了其价值属性。最后，$child2创建范围，也是一个孤立的范围，而不同的是对孩子的父层的范围。

此代码的输出如下所示：
首先，$child2只有继承了孩子的层次，所以没有孩子的实例为原型，没有文本属性，和第一行输出定义。

因为消化过程进行从上到下的范围层次底，它类似于树的深度遍历的过程。在这种情况下，顺序范围范围->美元孩子-> $child2 ->孩子，所以三看听众函数的输出也在上面秩序。

本文参考资料：
1。AngularJS公文
2。AngularJS的源代码
三.高级编程（第三版）
4。建立你自己的AngularJS

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，您可以留言交流，谢谢您的支持。