5.2 AngularJS作用域继承

5.2.1 JavaScript对象继承机制

学习AngularJS作用域继承之前，我们需要先了解一下JavaScript对象的继承机制。JavaScript语言遵循ECMAScript规范，在ECMAScript 6规范之前，JavaScript语言并没有类的概念，也不具备面向对象多态的特性，所以严格地讲JavaScript并不是一门面向对象语言，而是一门基于对象的语言。

JavaScript构造对象通常有两种方式。第一种方式是通过字面量创建，形式如下：

        var obj = {
            name:'jane',
            age:32
        };

另一种方式是通过对象的构造方法来创建，需要用到function关键字。JavaScript语言中的方法可以作为构造方法创建对象，比较容易让人产生疑惑。例如，我们使用下面这段代码定义一个构造方法：

        function Person（name, age）{
            this.name = name;
            this.age = age;
            this.eat = function() {

            console.log（'eat..'）;
            }
        }

但是我们把它作为普通方法调用就不会有问题。当使用构造方法创建对象时需要用到JavaScript的new关键字，使用方法如下：

        var person = new Person（'Jane',32）;

在实际项目中，当我们明确地使用function关键字定义一个构造方法时，构造方法名称通常采用帕斯卡命名法，即每个单词首字母大写（例如：LoginController）；而使用function定义一个普通方法时，方法名称可采用驼峰命名法，驼峰命名法跟帕斯卡命名法相似，只是首字母为小写（例如：checkUser），看上去像驼峰，因此而得名。

JavaScript语言为我们提供了几个内置的构造方法，例如Object、Array 、String、Boolean等。我们可以直接使用这些构造方法创建对象。

了解了JavaScript对象的创建方法后，我们再来看看JavaScript的对象继承机制。JavaScript语言有以下3种方式实现对象继承。

1．构造方法原型链继承

每个JavaScript构造方法都有一个名称为prototype的属性，可以指向另一个对象。当我们访问对象属性时（例如obj.name）, JavaScript引擎会从对象的所有属性中查找该属性，如果找到就返回属性值，如果没有找到就继续从prototype属性指向的对象属性中查找，如果仍然没有找到，则会沿着prototype链一直查找下去，直到prototype链结束或找到对象为止。接下来我们看一个原型链继承的案例，代码如下：

代码清单：ch05\ch05_02.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch05_02</title>
        </head>
        <body>
            <script type="text/javascript">
                function Animal(){
                    this.eat = function(){
                        console.log（'eat...'）;
                    }
                }
                function Cat（age）{
                    this.age = age;
                }
                Cat.prototype = new Animal();
                var cat = new Cat（10）;
                console.log（"cat.age=" + cat.age）;
                cat.eat();
            </script>
        </body>
        </html>

如上面的代码所示，首先定义两个构造方法Animal和Cat，把Cat的prototype属性指向一个Animal对象：

        Cat.prototype = new Animal();

接下来通过new关键字创建一个Cat对象：

        var cat = new Cat（10）;

在浏览器中运行该案例，控制台输出：

        cat.age=10
        eat...

Cat构造方法中并没有定义eat()方法，而我们通过Cat实例调用eat()方法输出了内容，说明Cat对象通过prototype属性继承了Animal对象的eat()方法。

2．使用apply、call方法实现继承

由于JavaScript构造方法的apply()、call()方法可以改变对象构造中“this”的上下文环境，使特定的对象实例具有对象构造中所定义的属性、方法，因此我们可以使用apply()、call()方法实现JavaScript对象的继承，例如下面的案例：

代码清单：ch05\ch05_03.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch05_03</title>
        </head>
        <body>
            <script type="text/javascript">
                function Person（name, age）{
                    this.name = name;
                    this.age = age;
                }
                function Student（name, age, love）{
                    //Person.apply（this, [name, age]）;
                    Person.call（this, name, age）;
                    this.love = love;
                }
                var student = new Student（'jane',23, 'pingpong'）;
                console.log（"student.name=" + student.name）;
                console.log（"student.age=" + student.age）;
                console.log（"student.love=" + student.love）;
            </script>
        </body>
        </html>

如上面的代码所示，在本例中我们首先定义了Person构造方法，接着在Student构造方法中调用Person.call()方法实现了继承，然后通过new关键字创建一个Student对象，在控制台中输出Student对象的属性值。在浏览器中预览ch05_03.html页面，打开开发人员工具，控制台输出内容如下：

        student.name=jane
        student.age=23
        student.love=pingpong

说明Student对象继承了Person对象的name和age属性。apply()方法和call()方法的不同之处在于apply()方法只接收两个参数，第二个参数是一个数组，而call()方法可以接收多个参数。

3．对象实例间继承

在JavaScript语言中，对象可以继承另外一个对象的属性，例如下面的案例：

代码清单：ch05\ch05_04.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch05_04</title>
        </head>
        <body>
            <script type="text/javascript">
                function Person（name, age）{
                    this.name = name;
                    this.age = age;
                }
                var person = new Person（'jane',28）;
                var student = Object.create（person）;
                student.love = "pingpong";
                console.log（Object.getPrototypeOf（student））;
                console.log（"student.name→"+student.name）;
                console.log（"student.age→"+student.age）;
                console.log（"student.love→"+student.love）;
            </script>
        </body>
        </html>

如上面的代码所示，在本例中我们用到了Object.create()方法，它的作用是以一个对象为原型创建另外一个对象，创建的对象和原对象具有相同的属性，我们可以通过Object. getPrototypeOf()方法获取新对象的原型。

在浏览器中运行ch05_04.html页面，打开开发人员工具，控制台输出内容如下：

        Person
        student.name→jane
        student.age→28
        student.love→pingpong

结合源代码，从输出的日志信息可以看出，student对象继承了Person对象的name和age属性，调用Object.getPrototypeOf()方法获取student对象的原型依然为Person。

本节中笔者对JavaScript对象的继承方式进行了比较全面的学习，下一小节我们一起学习AngularJS如何使用原型方式实现作用域对象的继承。

5.2.2 AngularJS作用域对象原型继承

上一小节介绍了JavaScript语言中对象继承的3种方式，其中AngularJS作用域对象继承采用第一种方式，即构造方法原型链继承。AngularJS作用域构造方法中提供了一个$new()成员方法，用于创建子作用域。AngularJS框架创建子作用域的过程大致如下：

        var parent = $rootScope;
        var child = parent.$new();

我们不妨了解一下$new()方法的定义，内容如下，有兴趣的读者可以参考AngularJS源码。

        Scope.prototype = {
              constructor: Scope,
              $new: function（isolate, parent）{
                var child;
                parent = parent || this;
                if（isolate）{
                  child = new Scope();
                  child.$root = this.$root;
                } else {
                  // Only create a child scope class if somebody asks for one,
                  // but cache it to allow the VM to optimize lookups.
                  if（! this.$$ChildScope）{
                    this.$$ChildScope = createChildScopeClass（this）;
                  }
                  child = new this.$$ChildScope();
                }
                child.$parent = parent;
                child.$$prevSibling = parent.$$childTail;
                if（parent.$$childHead）{
                  parent.$$childTail.$$nextSibling = child;
                  parent.$$childTail = child;
                } else {
                  parent.$$childHead = parent.$$childTail = child;
                }

                // When the new scope is not isolated or we inherit from `this`, and
                // the parent scope is destroyed, the property `$$destroyed` is
                // inherited prototypically. In all other cases, this property
                // needs to be set when the parent scope is destroyed.
                // The listener needs to be added after the parent is set
                if（isolate || parent ! = this）child.$on（'$destroy',
                destroyChildScope）;

                return child;
              },

              ......

        }

上面的代码为AngularJS1.5.5版本中$new()方法的定义，如上面黑体代码所示。其中，this.$$ChildScope为子作用域构造方法，由createChildScopeClass()方法调用返回。下面是createChildScopeClass()方法的定义：

        function createChildScopeClass（parent）{
            function ChildScope() {
              this.$$watchers = this.$$nextSibling =
                    this.$$childHead = this.$$childTail = null;
              this.$$listeners = {};
              this.$$listenerCount = {};
              this.$$watchersCount = 0;
              this.$id = nextUid();
              this.$$ChildScope = null;
            }
            ChildScope.prototype = parent;
            return ChildScope;
        }

createChildScopeClass()方法中定义了ChildScope构造方法，ChildScope即为子作用域的构造方法，接着指定ChildScope的prototype属性为parent, parent即为父作用域对象，这样子作用域就继承了父作用域的所有属性。

上面我们了解了AngularJS作用域继承机制，所有作用域对象都是$rootScope作用域的子作用域。还有一种情况需要我们考虑，即在AngularJS控制器中可以嵌套另外一个控制器，例如：

        <div ng-app>
            <div ng-controller="OuterController">

            <div ng-controller="InnerController">

            </div>
            </div>
        </div>

在上面的代码片段中，ng-controller指令范围内嵌套了另外一个ng-controller指令，这种情况下AngularJS是如何处理作用域对象继承的呢？过程如下：

AngularJS框架遍历DOM元素，查找到ng-app指令时启动应用，创建$rootScope作用域。

然后AngularJS框架查找到第一个ng-controller指令，指向名称为OuterController的控制器，并调用$rootScope.$new()方法，以原型继承的方式创建$rootScope作用域的子作用域对象（记为$scope1）。当OuterController构造方法接收一个名称为$scope的参数时，AngularJS实例化控制器对象时会把$scope1对象注入控制器对象中。

接下来AngularJS继续遍历DOM元素，遇到第二个嵌套的ng-controller指令时调用$scope1. new()方法，以$scope1为原型创建子作用域（记为$scope2, $scope2作用域对象能够访问$scope1作用域对象的所有属性）。

除了ng-app、ng-controller指令会创建作用域对象外，AngularJS指令也可能会产生子作用域，在后面的章节中我们会接触到。本节内容就介绍这么多，下节我们开始学习AngularJS作用域监视机制。

上一章目录下一章