变量声明如何在`class`和`constructor`之间有所不同？

Question

我见过一个例子,我正在尝试重现它.在name和age声明的内部class和services在(注射)加入constructor.

我想知道有声明变量之间的差别class,并constructor在这里.任何人都可以帮助我了解这些差异.

同样的,而不是宣布name和age我不能在声明里面constructor本身？

这是我的代码:

    import {Component} from 'angular2/core';
    import {CommonService} from './commonService';
    import {commonServiceIndipendent} from './commonSerivceIndipendent';

    @Component({

      selector : 'component1',

      template : `

        <h1>Component 1</h1>
        <input type="text" #message />

        <button (click)="onLog(message.value)" >Component1 - Message </button>

      `,

      providers:[commonServiceIndipendent]

    })

    export class Component1 {

      name:string; //why here?
      age:number; //why here?

//can't i add to constructor? if so how?
      constructor ( 
        private _commonService : CommonService, 
        private _commonServiceIndipendent:commonServiceIndipendent) {}


      //sending to same service. it has other instance in history
      onLog(message:string) {

        this._commonService.log( message );

        this.name = "Arif",
        this.age = 20;

        this.onData();

      }

      onData() {
        this._commonServiceIndipendent.myData(this.name,this.age);
      }

    }

Answer 1

在这种情况下

export class Component1 {

      constructor ( 
        private _commonService : CommonService, 
        private _commonServiceIndipendent:commonServiceIndipendent) {


       }

与此类似

export class Component1 {

      private _commonService : CommonService;
      private _commonServiceIndipendent:commonServiceIndipendent;

      constructor ( 
        _commonService : CommonService, 
        _commonServiceIndipendent:commonServiceIndipendent) {

        this._commonService = _commonService; 
        this._commonServiceIndipendent = _commonServiceIndipendent;

       }

如果你没有在构造函数中使用protected,private或者public,例如,DI,变量的范围_commonService是该构造的范围{ },你不能从其他功能使用.

例如:

export class Component1 {

      constructor ( 
        _commonService : CommonService, 
        _commonServiceIndipendent:commonServiceIndipendent) {

          _commonService .... Work
       }

       foo(){

        _commonService ..... Cannot find name '_commonService'.
        this._commonService ..... Property '_commonService' does not exist on type 'yourClass'.  

       }

如果您不将其分配给具有该类范围的另一个变量,那么您不能使用this关键字引用此变量.

export class Component1 {

  name:string; //why here?
  age:number; //why here?

//can't i add to constructor? if so how?

在没有Angular2的打字稿中,你只需要这样做:

constructor (name:string, age:number) {}

但是在使用Angular2的打字稿中,Angular2在大多数情况下负责在这里使用DI来实现:

constructor (private _commonServiceIndipendent:commonServiceIndipendent){}

你用它providers:[commonServiceIndipendent].

Angular2:注入非@Injectable类

如何在Angular2中正确使用依赖注入(DI)？

Answer 2

如果您在构造函数之外删除一个字段，则它可用于执行静态分析的工具，例如 linter 或自动完成。

如果您在构造函数中添加字段，此类工具将需要分析构造函数中的代码流（可能有if、、for...），并且如果实际创建字段，它可能取决于构造函数参数。这使得它变得非常困难并且通常不被支持。

在构造函数外部声明字段是一种更静态的方法，就像在编译语言中一样。在构造函数中创建它们是一种动态方法，通常在编译语言中不可用。

如果它只是用文字值初始化字段，它也会更简洁。您通常甚至可能根本不需要构造函数。

class MyClass {
   startValue:number = 1;
}

还有另一种使用构造函数的方法

class MyClass {
  constructor(private someField:string) {}
}

这也创建了一个private字段（也可以是public）。这种方式还使该字段可用于静态分析，因为该字段是无条件创建的（不依赖于仅在运行时已知的值）