Babel sostituisce questo con indefinito

Question

Questo codice

beforeEach(() => { 
     this.asd= '123'; 
     this.sdf= '234'; 
     this.dfg= '345'; 
     this.fgh= '456'; 
}); 

è stato transpiled da Babel a:

beforeEach(function() { 
     undefined.asd= '123'; 
     undefined.sdf= '234'; 
     undefined.dfg= '345'; 
     undefined.fgh= '456'; 
}); 

Perché?

Answer 1

Presumibilmente quel codice è al livello più alto di un modulo, quindi è in modalità rigorosa (l'impostazione predefinita per i moduli è la modalità rigorosa) o un file che viene valutato in modalità rigorosa (perché ha "use strict" o a causa delle impostazioni predefinite di Babel).

La versione corta: Se vi aspettate this da determinare da beforeEach quando si chiama il callback, ti ​​consigliamo di utilizzare una funzione function, non una funzione di freccia. Continuate a leggere perché Babel sta trasponendo così com'è:

La cosa fondamentale delle funzioni di freccia (oltre ad essere concise) è che ereditano this dal loro contesto (come una variabile su cui si chiudono), invece di averlo impostato da il chiamante. In modalità rigorosa, this nell'ambito globale è undefined. Quindi Babel sa, in fase di compilazione, che this all'interno della funzione freccia sarà undefined e lo ottimizzerà.

hai detto nei commenti che questo è all'interno di un'altra funzione, ma la mia ipotesi è che è all'interno di un'altra funzione freccia, ad esempio:

describe(() => { 
    beforeEach(() => { 
     this.asd= '123'; 
     // ... 
    }); 
}); 

Da Babel sa che this è undefined nel describe di callback, anche sa che this è undefined nella richiamata beforeEach.

Se si inserisce il codice in un contesto in modalità libera o all'interno di una chiamata di funzione in cui this non può essere determinato in fase di compilazione, non lo farà. Ad esempio, in modalità rigorosa tuo

beforeEach(() => { 
    this.asd= '123'; 
    this.sdf= '234'; 
    this.dfg= '345'; 
    this.fgh= '456'; 
}); 

effettivamente transpile a

'use strict'; 
beforeEach(function() { 
    undefined.asd = '123'; 
    undefined.sdf = '234'; 
    undefined.dfg = '345'; 
    undefined.fgh = '456'; 
}); 

ma questo:

function foo() { 
    beforeEach(() => { 
    this.asd= '123'; 
    this.sdf= '234'; 
    this.dfg= '345'; 
    this.fgh= '456'; 
    }); 
} 

transpiles a

'use strict'; 

function foo() { 
    var _this = this; 

    beforeEach(function() { 
    _this.asd = '123'; 
    _this.sdf = '234'; 
    _this.dfg = '345'; 
    _this.fgh = '456'; 
    }); 
} 

... perché Babel doesn so come foo sarà chiamato, e quindi cosa sarà this.

Answer 2

Ho riscontrato questo problema e ho modificato la funzione Fat Arrow in una funzione normale e sembrava funzionare di nuovo.

() => {} 

cambiata in

function() {}