typescript - ทำไมถึงเกิดการคัดลอกตื้นระหว่างวัตถุสองตัวที่แตกต่างกันใน angular 5?

ฉันมีตัวแปรสองตัวที่แตกต่างกัน:

1. gVar(บริการ)
2. fVar(ตัวแปรที่กำหนดภายในท้องที่)

ฉันได้ใช้วิธีสองวิธี (วิธีที่สองแก้ปัญหาของฉันได้ แต่ฉันยังไม่รู้ว่าปัญหาในวิธีแรกเกิดจากอะไร)

วิธีการแรก:

บริการถูกใช้ในคลาส serviceConsume.ts โดย DI ในลักษณะดังต่อไปนี้:

 private fVar: any = {};
 constructor(       
    private gVar: GlobeVar,
    ) {

    this.fVar = this.gVar.$fVar;
    }

และ gVar.ts เป็นบริการที่ถูกกำหนดดังนี้:

import { Injectable } from '@angular/core';

Injectable()
export class GlobeVar {
  private fVar: any = {};
  private Step: any;

  public get $Step(): any {
    return this.Step;
  }

  public set $Step(value: any) {
    this.Step = value;
  }

  public get $fVar(): any {
    return this.fVar;
  }

  public set $fVar(value: any) {
    this.fVar = value;
  }


  public clear() { 
    this.$fVar = null;
  }
}

ตอนนี้คำถามของฉันคือถ้าฉันทำการกำหนดค่าในลักษณะดังต่อไปนี้ในคลาส serviceConsume.ts ของฉัน

this.fVar.Step = null;

มันยังทำให้ this.gVar.$fVar.Step เป็น null ด้วย ...ได้อย่างไร?

แนวทางที่สอง:

แต่ถ้าฉันทำการมอบหมายในไฟล์คลาส serviceConsume.ts ของฉันในลักษณะนี้:

constructor(       
private gVar: GlobeVar,
) {
 Object.assign(this.fVar, this.gVar.$fVar);
 }

ดังนั้นการคัดลอกแบบตื้นจะไม่เกิดขึ้น

ฉันอยากรู้

1. การคัดลอกแบบตื้นเกิดขึ้นอย่างไรระหว่างการกำหนดค่าในแนวทางแรก
2. วิธีที่ดีที่สุดในการหลีกเลี่ยงการคัดลอกแบบตื้นคืออะไร (ถ้าฉันไม่ต้องการใช้ object.assign)
3. วิธีที่สองของฉันถูกต้องหรือไม่?

ขอบคุณล่วงหน้าสำหรับความเอาใจใส่และความพยายามทั้งหมดของคุณ ถ้ามีใครสามารถอธิบาย/บอกใบ้ฉันเรื่องนี้ได้ ฉันคิดเป็นการส่วนตัวว่าคุณได้เชี่ยวชาญ JavaScript/TypeScript หรือ Angular แน่นอน