Gulp-Uglify: $ (void 0) beim Caching von DOM

Question

Bei Verwendung von Gulp-Uglify- und Caching-DOM-Elementen (mit jQuery) macht uglify $(void 0) aus $(this).

$(document).on("click", "sth",() => { 
    var $this = $(this); 
    ... 
}); 

Wird in dieser Folge:

$(document).on("click", "sth", function() { 
    var e = $(void 0); 
    ... 
}); 

Wie kann ich das verhindern?

Answer 1

Pfeil Funktionen do not bind this:

Ein Pfeil Funktion diesen Kontext seines eigenen nicht schaffen, so haben this seine ursprüngliche Bedeutung aus dem einschließenden Kontext.

Das this in Ihrem Beispiel bedeutet, bezieht sich auf die this des umgebenden Rahmen. Da sich Ihre Pfeilfunktion nicht in einer anderen Funktion befindet, bezieht sich die this auf die globale this.

In einem Browser die globale thisrefers to the window object. Ich nehme an, dass Sie babel mit dem babel-preset-es2015 Preset verwenden. In diesem Fall wird babel annehmen, dass your code is inside an ES6 module. In einem ES6-Modul ist der Wert thisundefined.

Das bedeutet babel() diesen Code transpile wird:

var $this = $(this); 

In diesem Code:

var $this = $(undefined); 

nächstes haben Sie uglify(), die die obige Zeile so viel wie möglich zu komprimieren versucht. Zu diesem Zweck nutzt es die Tatsache, dass void 0 evaluates to undefined und da void 0 kürzer als undefined Sie mit diesem Ende:

var e = $(void 0); 

Wie beheben Sie das? Einfach. Verwenden Sie keine Pfeilfunktion:

$(document).on("click", "sth", function() { 
    var $this = $(this); 
    ... 
});