javascript基于原型的继承和面向对象中基于类的继承有那么些微妙的区别,这通常不会有什么大问题,但是这个文彪的区别在angular中使用$scope的时候会表现出来。在angular中,数据都有自己的作用域,在控制器中将数据存放在$scope上,在view中进行访问或者修改(仍然在该控制器中),而每个$scope都会继承父级的$scope,一直往上,知道最顶层的$rootScope($scope和传统的指令不同,$scope有一定的作用范围,即在自己所在的控制器范围内进行操作,并且只继承显式声明的属性)。
javascript原型继承的特点使得在父类和子类中共享数据变的不那么重要,但是在angular中,由于限定了$scope的作用范围,一不小心,也会很容易误用父级$scope中的属性,这并不是我们想看到的!
举一个很简单的例子,假设我们要在一个div中显示用户名,这个用户名在登录表单中进行输入,来看下简单的demo:
根据demo可以看出,我们在父控制器设置了一个user,子控制器中继承父类的user,在text input 中设置了user的ng-model,尝试想一下,当我们在输入框中输入的时候,parentCtrl控制器和childCtrl控制器的内容哪个会被更新?parentCtrl或者是childCtrl?还是两个都会?
如果你选择了childCtrl,那么你基本是已经理解了原型继承是如何进行工作的了,如果你还有其他的答案的话,同学,可能你还要多学习学习了。让我们来看看测试结果:
当我们在检索值类型的时候,原型链是不会起作用的,所以我们在输入框输入内容的时候,只会更新当前所在的控制器中的user,如果我们想要parentCtrl中的user的话,那就说明势必要触发原型链的检索!那么用什么办法来解决呢?使用对象来解决(在javascript中,函数、数组、对象都是对象)。让我们再来写一个demo,不同的是,这次使用的是对象,而非值。
那么这次在input中进行输入,结果会如何?
这次,由于user是一个对象,因此原型链会起作用,parentCtrl和childCtrl中的内容都会被更新!
好吧,我承认这是一个很作的例子,但是当你使用某些个指令去创建子$scope的时候,稍微不注意,这样的问题就会很容易产生(例如ngRepeat指令)!