Es muy sencillo, agrega a tu clase una propiedad o atributo llamada `encendido` de tipo booleano con valor por defecto en `false`.

Al momento de llamar a `girarAspas()` estableces su valor a `true`, y sólo lo cambias a `false` cuando la perilla está en el estado de apagado (`i = 3`).

Cuando presionas en la perilla de girar la rejilla, verificas el estado de la propiedad `encendido`, si la misma es `false` retornas (sales) de la función sin hacer nada más, y si la misma es `true` puedes encender el giro de la rejilla.

Cuando el ventilador se para, se establece el valor de `j` en 1, se llama al método de girar la rejilla y se establece `encendido` a `false`, de esta forma se apaga tanto el ventilador como la rejilla.

Por ejemplo:


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const ventilador = {
        powerAspas: document.getElementById("power"),
        aspas: document.getElementById("aspas"),
        powerRejilla: document.getElementById("rejilla"),
        rejilla: document.getElementById("tapa")
    }

    let i = 0;

    let j = 0;

    class artefacto{
        encendido = false;
        rejillaEncendida = false;
        constructor(powerAspas, aspas, powerRejilla, rejilla){
            this.powerAspas = powerAspas;
            this.aspas = aspas;
            this.powerRejilla = powerRejilla;
            this.rejilla = rejilla;
        }
        $girarAspas(){
            this.encendido = true;
            if(this.rejillaEncendida) {
                j = 0;
                this.$powerRejilla();
            }
            if (i == 0){
                
                ventilador.powerAspas.style.transform = "rotate(60deg)"
                ventilador.aspas.style.animationDuration = "2s";
                i = 1;
            }
            else if (i == 1){
                ventilador.powerAspas.style.transform = "rotate(120deg)"
                ventilador.aspas.style.animationDuration = "1s";
                i = 2;
            }
            else if (i == 2){
                ventilador.powerAspas.style.transform = "rotate(180deg)"
                ventilador.aspas.style.animationDuration = ".5s";
                i = 3;
            }
            else if (i == 3){
                            ventilador.powerAspas.style.removeProperty("transform");
                ventilador.aspas.style.animationDuration = "0s";
                i = 0;
                j = 1;
                this.$powerRejilla();
                this.encendido = false;
            }
        }
        $powerRejilla(){
            if(!this.encendido) {
              return;
            }
            if (j == 0){
                ventilador.powerRejilla.style.transform = "rotate(90deg)";
                ventilador.rejilla.style.animationDuration = "32s";
                j = 1;
                this.rejillaEncendida = true;
            }
            else if (j == 1){
                if(i !== 0) {
                    this.rejillaEncendida = false;
                }
                      ventilador.powerRejilla.style.removeProperty("transform");
                ventilador.rejilla.style.animationDuration = "0s";
                j = 0;
            }
        }
    }

    const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

    ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

    ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});

<!-- language: lang-css -->

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root{
        --background-color: #222;
    }

    body{
        background-color: var(--background-color);
        overflow: hidden;
    }

    main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #ventilador{
        height: 450px;
        width: 450px;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 20px;
    }

    #circulo{
        height: 100%;
        width: 100%;
        border-radius: 100%;
        background-color: var(--background-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .barras-detras{
        transform: rotate(7.5deg);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .barra-detras{
        background-color: #333;
        height: 400px;
        width: 2px;
        position: absolute;
    }

    .barra-detras-dos{
        transform: rotate(15deg);
    }

    .barra-detras-tres{
        transform: rotate(30deg);
    }

    .barra-detras-cuatro{
        transform: rotate(45deg);
    }

    .barra-detras-cinco{
        transform: rotate(60deg);
    }
    .barra-detras-seis{
        transform: rotate(75deg);
    }

    .barra-detras-siete{
        transform: rotate(90deg);
    }

    .barra-detras-ocho{
        transform: rotate(105deg);
    }

    .barra-detras-nueve{
        transform: rotate(120deg);
    }

    .barra-detras-diez{
        transform: rotate(135deg);
    }

    .barra-detras-once{
        transform: rotate(150deg);
    }

    .barra-detras-doce{
        transform: rotate(165deg);
    }

    .aspas{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .aspa{
        width: 60px;
        height: 350px;
        background-color: #666;
        position: absolute;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 40px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .aspa-dos{
        transform: rotate(45deg);
    }

    .aspa-tres{
        transform: rotate(90deg);
    }

    .aspa-cuatro{
        transform: rotate(135deg);
    }

    #tapa{
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 100%;
        border: 10px solid #555;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: rejilla 0s infinite linear;
    }

    .barras{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .barra{
        background-color: #555;
        height: 400px;
        width: 2px;
        position: absolute;
    }

    .barra-dos{
        transform: rotate(15deg);
    }

    .barra-tres{
        transform: rotate(30deg);
    }

    .barra-cuatro{
        transform: rotate(45deg);
    }

    .barra-cinco{
        transform: rotate(60deg);
    }
    .barra-seis{
        transform: rotate(75deg);
    }

    .barra-siete{
        transform: rotate(90deg);
    }

    .barra-ocho{
        transform: rotate(105deg);
    }

    .barra-nueve{
        transform: rotate(120deg);
    }

    .barra-diez{
        transform: rotate(135deg);
    }

    .barra-once{
        transform: rotate(150deg);
    }

    .barra-doce{
        transform: rotate(165deg);
    }

    .tapita{
        background-color: #555;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        position: absolute;
        box-shadow: 0 0 5px rgba(0, 0, 0, .75);
    }

    .controles{
        position: absolute;
        width: 450px;
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        padding: 20px;
    }

    #power{
        width: 25px;
        height: 25px;
        background-color: #ddd;
        border-radius: 100%;
        border: 1px solid #aaa;
        cursor: pointer;
        display: flex;
        padding: 2px;
        justify-content: center;
        align-items: flex-start;
    }

    #rejilla{
        width: 25px;
        height: 25px;
        background-color: #ddd;
        border-radius: 100%;
        border: 1px solid #aaa;
        cursor: pointer;
        display: flex;
        padding: 2px;
        justify-content: center;
        align-items: flex-start;
    }

    .indicador{
        background-color: #aaa;
        width: 2px;
        height: 50%;
    }

    .vel{
        animation-name: vel;
        animation-duration: 0s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes vel{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

    @keyframes rejilla{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

<!-- language: lang-html -->

    <script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
    <main>
      <div id="ventilador">
        <div id="circulo">
          <div class="barras-detras">
            <div class="barra-detras barra-detras-uno"></div>
            <div class="barra-detras barra-detras-dos"></div>
            <div class="barra-detras barra-detras-tres"></div>
            <div class="barra-detras barra-detras-cuatro"></div>
            <div class="barra-detras barra-detras-cinco"></div>
            <div class="barra-detras barra-detras-seis"></div>
            <div class="barra-detras barra-detras-siete"></div>
            <div class="barra-detras barra-detras-ocho"></div>
            <div class="barra-detras barra-detras-nueve"></div>
            <div class="barra-detras barra-detras-diez"></div>
            <div class="barra-detras barra-detras-once"></div>
            <div class="barra-detras barra-detras-doce"></div>
          </div>
          <div class="aspas vel" id="aspas">
            <div class="aspa aspa-uno"></div>
            <div class="aspa aspa-dos"></div>
            <div class="aspa aspa-tres"></div>
            <div class="aspa aspa-cuatro"></div>
          </div>
          <div class="tapa" id="tapa">
            <div class="barras">
              <div class="barra barra-uno"></div>
              <div class="barra barra-dos"></div>
              <div class="barra barra-tres"></div>
              <div class="barra barra-cuatro"></div>
              <div class="barra barra-cinco"></div>
              <div class="barra barra-seis"></div>
              <div class="barra barra-siete"></div>
              <div class="barra barra-ocho"></div>
              <div class="barra barra-nueve"></div>
              <div class="barra barra-diez"></div>
              <div class="barra barra-once"></div>
              <div class="barra barra-doce"></div>
            </div>
            <div class="tapita"></div>
          </div>
        </div>
        <div class="controles">
          <span id="power">
            <div class="indicador"></div>
          </span>
          <span id="rejilla">
            <div class="indicador"></div>
          </span>
        </div>
      </div>
    </main>

<!-- end snippet -->

**Edición**

Si deseas guardar el estado de la rejilla, basta con agregar otra variable booleana para ello. Por ejemplo, podemos crear una variable llamada `rejillaEncendida` de tipo booleana también, por defecto en `false`. Al encender la rejilla, su valor cambia a `true` y se mantiene así aunque se apague el ventilador. El valor de esta variable cambiará sólo si se apaga la rejilla desde la perilla de la rejilla y no de la perilla del ventilador.

Espero que esto te ayude a resolver el problema.