Perché questi snippet di JavaScript si comportano in modo diverso anche se entrambi riscontrano un errore?

In realtà, se leggi correttamente il messaggio di errore, il caso 1 e il caso 2 generano errori diversi.

Caso a.x.y:

Impossibile impostare la proprietà "y" di undefined

Caso a.x.y.z:

Impossibile leggere la proprietà "y" di undefined

Immagino sia meglio descriverlo passo dopo passo in un inglese facile.

Caso 1

// 1. Declare variable `a`
// 2. Define variable `a` as {}
var a = {}

// 1. Declare variable `b`
// 2. Define variable `b` as {}
var b = {}

try {

  /**
   *  1. Read `a`, gets {}
   *  2. Read `a.x`, gets undefined
   *  3. Read `b`, gets {}
   *  4. Set `b.z` to 1, returns 1
   *  5. Set `a.x.y` to return value of `b.z = 1`
   *  6. Throws "Cannot **set** property 'y' of undefined"
   */
  a.x.y = b.z = 1
  
} catch(e){
  console.error(e.message)
} finally {
  console.log(b.z)
}

Caso 2

// 1. Declare variable `a`
// 2. Define variable `a` as {}
var a = {}

// 1. Declare variable `b`
// 2. Define variable `b` as {}
var b = {}

try {

  /**
   *  1. Read `a`, gets {}
   *  2. Read `a.x`, gets undefined
   *  3. Read `a.x.y`, throws "Cannot **read** property 'y' of undefined".
   */
  a.x.y.z = b.z = 1
  
} catch(e){
  console.error(e.message)
} finally {
  console.log(b.z)
}

Nei commenti, Solomon Tam ha trovato questa documentazione ECMA sull'operazione di assegnazione .

L'ordine delle operazioni è più chiaro quando si sfrutta l'operatore virgola all'interno della notazione tra parentesi per vedere quali parti vengono eseguite quando:

var a = {}
var b = {}

try{
 // Uncaught TypeError: Cannot set property 'y' of undefined
  a
    [console.log('x'), 'x']
    [console.log('y'), 'y']
    = (console.log('right hand side'), b.e = 1);
} catch(err) {
  console.error(err);
}
console.log(b.e) // 1

var a = {}
var b = {}

try {
  // Uncaught TypeError: Cannot read property 'y' of undefined
  a
    [console.log('x'), 'x']
    [console.log('y'), 'y']
    [console.log('z'), 'z']
    = (console.log('right hand side'), b.e = 1);
} catch(err) {
  console.error(err);
}

console.log(b.e) // undefined

Guardando le specifiche :

La produzione AssignmentExpression : LeftHandSideExpression = AssignmentExpressionviene valutata come segue:

1. Sia lref il risultato della valutazione di LeftHandSideExpression.

2. Sia rref il risultato della valutazione di AssignmentExpression.

3. Sia rval GetValue(rref).

4. Genera un'eccezione SyntaxError se ... (irrilevante)

5. Chiama PutValue(lref, rval).

PutValueè ciò che genera TypeError:

1. Lascia che O sia ToObject(base).

2. Se il risultato della chiamata al [[CanPut]]metodo interno di O con argomento P è falso, allora

   un. Se Throw è true, genera un'eccezione TypeError.

Niente può essere assegnato a una proprietà di undefined- il [[CanPut]]metodo interno di undefinedtornerà sempre false.

In altre parole: l'interprete analizza il lato sinistro, quindi analizza il lato destro, quindi genera un errore se la proprietà sul lato sinistro non può essere assegnata.

Quando lo fai

a.x.y = b.e = 1

Il lato sinistro viene analizzato con successo finché non PutValueviene chiamato; il fatto che la .xproprietà restituisca undefinednon viene considerato fino a quando non viene analizzato il lato destro. L'interprete lo vede come "Assegna un valore alla proprietà" y "di undefined" e l'assegnazione a una proprietà di undefinedsoli lanci all'interno PutValue.

In contrasto:

a.x.y.z = b.e = 1

L'interprete non arriva mai al punto in cui cerca di assegnare alla zproprietà, perché prima deve risolversi a.x.yin un valore. Se a.x.yrisolto in un valore (anche in undefined), sarebbe OK - un errore verrebbe generato all'interno PutValuecome sopra. Ma l' accesso a.x.y genera un errore, perché ynon è possibile accedere alla proprietà undefined.

Considera il codice seguente:

var a = {};
a.x.y = console.log("evaluating right hand side"), 1;

Lo schema approssimativo dei passaggi necessari per eseguire il codice è il seguente ^rif :

1. Valuta il lato sinistro. Due cose da tenere a mente:
   • Valutare un'espressione non è la stessa cosa che ottenere il valore dell'espressione.
   • Valutare una proprietà di accesso ^ref esempio a.x.yrestituisce un riferimento ^Rif costituito da valore base a.x(undefined) e il nome del riferimento ( y).
2. Valuta il lato destro.
3. Ottieni il valore del risultato ottenuto nel passaggio 2.
4. Impostare il valore del riferimento ottenuto nel passaggio 1 al valore ottenuto nel passaggio 3, ovvero impostare la proprietà ydi undefined al valore. Questo dovrebbe generare un'eccezione TypeError ^ref .