$state $watch $scope $rootScope 分别是什么？

大家好，我是IT修真院成都分院第3期的学员王奎智，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，修真院官网JS任务7，Angular中，$state $watch $scope $rootScope 分别是什么？

1.背景介绍

在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs 就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟大家讨论一下这 几个方法

2.知识剖析

$scope

$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以 controller不同，他们的scope是不同的，那么，如果我们想象js那样，做一个全局变量该怎么办呢？这就要说 到rootScope了。

$rootScope

$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。 用rootscope定义的值，可以在各个controller中使用。

$watch

相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？ 当我们在创建出scope下的一个新属性的时候，ng就会主动为我们新属性加上$watch这个方法，这个方法会监听我们 的数据变化，当数据变化之后，就立即把view和scope上数据同步。

$watch(watchExpression, listener, objectEquality);

watchExpression,需要监控的表达式

listener,处理函数，函数参数如下 function(newValue,oldValue, scope)

objectEquality,是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

$state

在ajax技术发展普及之后，因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点，一个新技术应运而生： 路由，$state就是路由中的一项服务。

路由的具体用法

此处可点→→→ui-rooter的使用方法

$stateParams 状态参数 在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时： url: '/inbox/:inboxId/messages/{sorted}?from&to'//当用户访问者链接时：'/inbox/123/messages/ascending?from=10&to=20' $stateParams对象的值为： {inboxId: '123', sorted: 'ascending', from: 10, to: 20}

3.常见问题

watch的深度监听是什么意思呢？有什么优缺点呢？

4.解决方案

$watch在对待原始类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。在前面的例子中，我们知道，$watch函数有接收两个参数，第一个参数是需要监视的对象，第二个参数是在监视对象发生变化时需要调用的函数，实际上$watch还有第三个参数，它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“reference watch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来说，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当做没有看见。

如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equality watch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来

既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，上面的例子中因为items比较简单，因此可能性能上不会有什么差别，但是到了实际生产时，我们要面对的数据千千万万，可能因为全等监视这一个设置就会消耗大量的资源，让应用停滞不前

5.编码实战

6.扩展思考

7.参考文献

参考一：深度理解scope

参考二：原始数据类型和对象类型的区别及深度拷贝解析

8.更多讨论

大家有什么不懂的可以相互交流一下呀

$state $watch $scope是什么？_腾讯视频

视频链接

PPT链接

鸣谢

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

你可以直接点击此链接与我一起学习：修真院