typescript - Varför händer denna ytliga kopiering mellan två olika objekt i Angular 5?

Jag har två olika variabler :

1. gVar(tjänst)
2. fVar(lokalt definierad variabel)

Jag hade använt två tillvägagångssätt (det andra tillvägagångssättet löser mitt problem men jag vet fortfarande inte vad som orsakar problemet i det första tillvägagångssättet).

FörstaTillvägagångssätt:

Tjänsten används i klassen serviceConsume.ts av DI på följande sätt:

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

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

och gVar.ts är en tjänst definierad som:

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;
  }
}

Nu är min fråga om jag gör tilldelningen på följande sätt i min serviceConsume.ts-klass

this.fVar.Step = null;

Det gör också this.gVar.$fVar.Step till null ...HUR?

Andra tillvägagångssätt:

Men om jag gör en tilldelning i min serviceConsume.ts-klassfil på detta sätt:

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

då sker ingen ytlig kopiering.

Jag vill veta

1. Hur en ytlig kopia sker vid tilldelning i det första tillvägagångssättet.
2. Vad är det bästa sättet att undvika ytlig kopia (om jag inte vill använda object.assign).
3. Är mitt andra tillvägagångssätt rätt?

Tack på förhand för all er uppmärksamhet och ansträngning. Om någon kan förklara/peka mig på detta; jag personligen tycker att ni säkert har bemästrat JavaScript/TypeScript eller Angular.