AngularJS中的Constructor和ngOnInit有什么区别？

在AngularJS中，构造函数（Constructor）和ngOnInit函数都是JavaScript类中定义的生命周期钩子（Lifecycle Hook），这些钩子允许开发人员处理特定的应用程序生命周期事件。然而，这两个函数之间有一些不同之处，我们将在本文中介绍它们的区别。

构造函数（Constructor）

构造函数是每个类中都存在的函数，它在类实例化时运行一次。在AngularJS中，构造函数用于初始化类中的各种属性、注入服务、以及创建子组件等。下面是构造函数的示例：

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html'
})
export class MyComponent {
    name: string;

    constructor(private myService: MyService) {
        this.name = myService.getName();
    }
}

在上面的示例中，我们在构造函数中注入了MyService，并通过该服务的getName()函数将其名称赋给了类中的name属性。这个构造函数只会在组件实例化时执行一次。

ngOnInit函数

ngOnInit函数是AngularJS中定义的另一个生命周期钩子，它用于在组件实例化之后执行一些逻辑。与构造函数不同，ngOnInit函数仅在AngularJS显示组件之前运行一次。例如，我们可以使用ngOnInit函数来订阅某个Observable并在组件加载时获取数据。下面是ngOnInit函数的示例：

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html'
})
export class MyComponent implements OnInit {
    name: string;

    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.getName().subscribe(name => {
            this.name = name;
        });
    }
}

在上面的示例中，我们实现了OnInit接口并添加了ngOnInit函数。在ngOnInit函数中我们通过注入的MyService对象调用了getName函数，并在其返回observable中订阅数据更新。这个函数只会在组件初次显示时执行一次。

区别

总的来说，构造函数和ngOnInit函数都是类的声明周期函数，在AngularJS会生命周期的不同阶段调用。构造函数只会在实例化对象时执行一次，用于对象的初始化和变量的声明等。 ngOnInit函数则在组件被首次展示前且只执行一次，用户在这个时候完成一些数据的绑定和初始化的应用。

最后要指出的是，在Angular6中，生命周期钩子也做了一些变化。这里我们仅仅讨论AngularJS中的常规构造函数和ngOnInit函数，其它关于生命周期钩子的问题将留待以后的文章中探讨。