对AngularJs中$scope的深入理解

$scope在AngularJS中可谓十分重要,是AngularJS中MVC的基础,也是实现双向数据绑定的基础,那么我们该如何理解$scope呢?

首先,$scope本身是一个普通的JavaScript对象;其次,$scope是一个表达式的执行环境

我们该如何理解执行环境呢?在JavaScript中,执行环境定义了变量或函数有权访问的其他数据,也就决定了它们可以对哪些变量或者函数进行操作。每个执行环境都有一个与之关联的变量对象,这个对象中保存了所有对应的当前环境的所有变量和函数的定义。当然,我们编写的代码是无法访问这个对象的,但解析器在处理数据时会在后台使用它。

是不是感觉与$scope很巧合,$scope同样是一个普通JavaScript对象,也是一个表达式的执行环境,并绑定了当前表达式的变量或者函数。很显然,AngularJS运用$scope帮助我们更好的去规范了不同执行环境中的变量与函数。

那么这里我们再来思考另一个$scope的特性$scope是一个树形结构,与DOM标签平行,子$scope对象可以对父$scope对象的变量、函数等进行操作

在JS中,全局执行环境是最外围的一个执行环境。在浏览器中,一般认为window对象是我们的全局执行环境,因为所有的全局变量和函数都是作为window对象的属性和方法创建的。全局执行环境直到关闭网页时才会销毁,这时会销毁其中的所有变量与函数的定义。每一个函数都有自己的执行环境,而局部执行环境中所有代码执行完后,该执行环境就会被销毁,包括其的变量及函数定义。当一个函数在执行时,它的执行环境会被放入一个环境栈中(不知道栈的可以先搜索关于栈的定义)。在当前的函数执行完后,栈便会将其对应的执行环境变量弹出,把控制权返回给栈中下一个的执行环境,而当前在栈中顶层的执行环境,是可以访问当前在栈中所有的父元素的执行环境,如:

function  father(){

    function  son(){

    function  grandson(){

}

}

}

在以上代码中,执行环境分别被压入环境栈的先后顺序为 father的执行环境、son的执行环境、grandson的执行环境,也就是说grandson位于环境栈栈的最顶端,此时grandson可以访问当前在栈中的它的父元素的执行环境,如son,father。同样,当grandson执行完后,会被弹出。此时,son位于环境栈的最顶端,son可以访问当前在栈中的它的父元素father的执行环境。

根据以上的对JS执行环境的介绍,可以看做执行环境存在的$scope也具有同样的特性。这也就是为什么子$scope对象可以对父$scope对象的属性和方法进行访问,$scope对象是树形结构 。JS中一般认为window对象是JS的全局执行环境,那么$scope中的全局执行环境是什么?根$scope一般被认为位于ng-app上。

欢迎指正,欢迎交流,不喜勿喷。


你可能感兴趣的:(web前端)