博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs 中的scope继承关系——(1)
阅读量:6039 次
发布时间:2019-06-20

本文共 1612 字,大约阅读时间需要 5 分钟。

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html

JavaScript 的原型链继承

假设父类 parentScope 有如下成员属性 aString, aNumber, anArray, anObject, 以及 aFunction。子类 childScope 原型继承父类 parentScope,于是我们有:

如果子 Scope 尝试去访问 parentScope 中定义的属性,JavaScript 会先在子 Scope 中查找,如果没有该属性,则找它继承的 scope 去获取属性,如果继承的原型对象 parentScope 中都没有该属性,那么继续在它的原型中寻找,从原型链一直往上直到到达 rootScope。所以,下面的表达式结果都是 ture:

childScope.aString === 'parent string'childScope.anArray[1] === 20childScope.anObject.property1 === 'parent prop1'childScope.aFunction() === 'parent output'

假设我们执行下面的语句

childScope.aString = 'child string'

原型链并没有被查询,反而是在 childScope 中增加了一个新属性 aString。这个新属性隐藏(覆盖)了 parentScope 中的同名属性。在下面我们讨论 ng-repeat 和 ng-include 时这个概念很重要。

假设我们执行这个操作:

childScope.anArray[1] = '22'childScope.anObject.property1 = 'child prop1'

原型链被查询了,因为对象 anArray 和 anObject 在 childScope 中没有找到。它们在 parentScope 中被找到了,并且值被更新。childScope 中没有增加新的属性,也没有任何新的对象被创建。(注:在 JavaScript 中,array 和 function 都是对象)

假设我们执行这个操作:

childScope.anArray = [100, 555]childScope.anObject = { name: 'Mark', country: 'USA' }

原型链没有被查询,并且子 Scope 新加入了两个新的对象属性,它们隐藏(覆盖)了 parentScope 中的同名对象属性。

应该可以总结

  • 如果读取 childScope.propertyX,并且 childScope 有属性 propertyX,那么原型链没有被查询。
  • 如果设置 childScope.propertyX,原型链不会被查询。

最后一种情况,

delete childScope.anArraychildScope.anArray[1] === 22  // true

我们从 childScope 删除了属性,则当我们再次访问该属性时,原型链会被查询。删除对象的属性会让来自原型链中的属性浮现出来。

AngularJS 的 Scope 继承

  • 创建新的 Scope,并且原型继承:ng-repeat, ng-include, ng-switch, ng-view, ng-controller, directive withscope: true, directive with transclude: true
  • 创建新的 Scope,但不继承:directive with scope: { ... }。它会创建一个独立 Scope。

注:默认情况下 directive 不创建新 Scope,即默认参数是 scope: false

 

转载地址:http://xprhx.baihongyu.com/

你可能感兴趣的文章
[SQL Server] 数据库日志文件自动增长导致连接超时的分析
查看>>
【常见Web应用安全问题】---6、Script source code disclosure
查看>>
<html:form>标签
查看>>
除了《一无所有》,我一无所有
查看>>
每日英语:China Seeks to Calm Anxiety Over Rice
查看>>
C++中struct和class的区别 [转]
查看>>
C++ ofstream和ifstream详细用法
查看>>
Mysql 连接查询 Mysql支持的连接查询有哪些
查看>>
Hive Streaming 追加 ORC 文件
查看>>
打开Apache自带的Web监视器
查看>>
eclipse插件
查看>>
Android笔记:通过RadioGroup/RadioButton自定义tabhost的简单方法
查看>>
ELCSlider
查看>>
XCode工程中 Targets详解
查看>>
Ext.Msg.prompt的高级应用
查看>>
Postgres 中 to_char 格式化记录
查看>>
关于联合索引
查看>>
开源 java CMS - FreeCMS2.7 登录移动端管理中心
查看>>
Android FM模块学习之三 FM手动调频
查看>>
Python 设置系统默认编码以及其他编码问题大全
查看>>