Tuyên bố biến khác nhau như thế nào giữa `lớp` và` hàm tạo`?

Question

Tôi đã xem một ví dụ, và tôi đang buộc phải tái tạo nó. các name và age được khai báo bên trong class và services (Tiêm) được thêm vào trong constructor.

Tôi muốn biết sự khác nhau giữa việc khai báo biến với class và constructor tại đây. bất kỳ ai giúp tôi biết sự khác biệt.

Thay vì khai báo name và age, tôi có thể tự khai báo bên trong số construction không?

đây là mã của tôi:

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

Nếu bạn delcare một lĩnh vực bên ngoài của các nhà xây dựng nó có sẵn cho các công cụ mà làm phân tích tĩnh, giống như một Linter hoặc autocompletion.

Nếu bạn thêm trường vào hàm tạo, các công cụ như vậy sẽ cần phân tích luồng mã (có thể là if, for, ...) trong hàm tạo và có thể phụ thuộc vào tham số hàm tạo nếu trường thực sự được tạo hay không . Điều này làm cho nó khá khó khăn và thường không được hỗ trợ.

Khai báo các trường bên ngoài hàm tạo là một cách tiếp cận tĩnh hơn như trong các ngôn ngữ được biên dịch. Tạo chúng trong constructor là một cách tiếp cận năng động thường không có sẵn trong các ngôn ngữ biên dịch.

Nếu chỉ để khởi tạo các trường có giá trị bằng chữ, nó cũng súc tích hơn. Bạn thường có thể thậm chí không cần một nhà xây dựng ở tất cả.

class MyClass { 
    startValue:number = 1; 
} 

Ngoài ra còn có một cách khác để sử dụng một constructor

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

đó cũng tạo ra một lĩnh vực private (cũng có thể là public). Cách này cũng làm cho trường được biết đến với phân tích tĩnh, vì trường được tạo ra vô điều kiện (không phụ thuộc vào giá trị chỉ được biết khi chạy)

Answer 2

Do biến được xác định, chúng là thành viên của lớp Component1 và bất kỳ trường hợp nào của Component1 lớp học có name và age thành viên công khai tương ứng string và number loại.

Sau khi TypeScript được chuyển đổi, không có sự khác biệt cho dù bạn khai báo chúng trong constructor hoặc làm thành viên. Tuy nhiên, trước khi nó được transpiled, bạn có quyền truy cập vào các thành viên này từ các cá thể của lớp này. Điều này cho phép bạn xem lỗi trong khi bạn đang phát triển, ví dụ như cố gắng đặt age của một số Component1 thành nội dung khác với số number.

var x = new Component1(a, b); 
x.age = "a"; // IDE/editor shows you have a problem here. 

Sự khác biệt xảy ra khi bạn xác định thành viên của lớp là riêng tư. Sau đó, có sự khác biệt sau khi transpilation.

Here's một số tài liệu về các lớp TS.

Answer 3

trong trường hợp này

export class Component1 { 

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


     } 

là tương tự như sau

export class Component1 { 

     private _commonService : CommonService; 
     private _commonServiceIndipendent:commonServiceIndipendent; 

     constructor ( 
     _commonService : CommonService, 
     _commonServiceIndipendent:commonServiceIndipendent) { 

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

     } 

nếu bạn không sử dụng trong các nhà xây dựng protected, private, hoặc public, ví dụ, DI, phạm vi của biến _commonService là phạm vi của hàm tạo { } bạn không thể sử dụng từ một hàm khác.

ví dụ:

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'. 

     } 

Nếu bạn không gán nó vào một biến có phạm vi của lớp, vì vậy bạn không thể đề cập đến biến này, với this từ khóa.

---

export class Component1 { 

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

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

trong nguyên cảo mà không Angular2, bạn có thể làm điều này mà không có gì hơn:

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

nhưng trong nguyên cảo với Angular2, Angular2 có trách nhiệm, hầu hết thời gian, tận dụng DI cho exaple ở đây:

constructor (private _commonServiceIndipendent:commonServiceIndipendent){} 

bạn sử dụng cho điều đó providers:[commonServiceIndipendent].

---

Angular2: Inject a non @Injectable class

How to use Dependency Injection (DI) correctly in Angular2?