Kennen Sie die seltsamen Dinge in Javascript?

Unsere erfahrenen Vorgänger haben zahllose Codes geschrieben und sind in zahllose Fallen getappt. Es gibt jedoch einige Fallstricke, denen Sie in Ihrem Leben möglicherweise nie begegnen oder die Sie niemals berühren werden, da sie im Geschäftskodex niemals vorkommen werden ~~

1

Function.prototype ist eigentlich ein Funktionstyp. Der Prototyp einer benutzerdefinierten Funktion ist ein Objekttyp.

Typ von Function.prototype === 'Funktion'; // wahr

Funktion Personen() {}
Typ von People.prototype === 'Objekt'; // wahr

Wir können also eine leere Funktion wie folgt festlegen:

// OK 
const noop = Funktion.prototyp;
// OK
const noop = () => {};

2

Kann eine Variable tatsächlich ungleich sich selbst sein?

Konstante x = NaN;
x !== x // wahr

Dies sind bisher die einzigen Daten in der JS-Sprache, die nicht gleich sich selbst sind. Warum? Weil NaN einen Bereich und keinen bestimmten Wert darstellt.
In der früheren Funktion isNaN() wurde „true“ zurückgegeben, selbst wenn ein String übergeben wurde. Dieses Problem wurde in es6 behoben.

istNaN('abc'); // wahr
Nummer.isNaN('abc') // falsch

Wenn Sie also mit alten Browsern kompatibel sein möchten, ist die Verwendung von x !== x zur Ermittlung, ob es sich um NaN handelt, eine gute Lösung.

3

Wenn der Konstruktor neue Daten zurückgibt

// gibt die Funktion People() {} nicht zurück
const Leute = neue Leute(); // Leute {}

// Gibt eine Zahlenfunktion zurück People() {
 Rückgabe 1;
}
const Leute = neue Leute(); // Leute {}

// Gibt eine neue Objektfunktion Animal() zurück {
 zurückkehren {
  hallo: 'Welt',
 };
}
const animal = new Animal(); // { hallo: 'Welt' }

Beim Instanziieren eines Konstruktors funktioniert die Rückgabe eines Nicht-Objekttyps nicht

4

.call.call Wem wird hier zugejubelt?

Funktion fn1() {
 konsole.log(1);
}

Funktion fn2() {
 konsole.log(2);
}

fn1.anrufen.anrufen(fn2); // 2

Daher ist fn1.call.call(fn2) gleichwertig mit fn2.call(undefined). Und egal, wie viele .call Sie hinzufügen, der Effekt ist derselbe.

5

Kann ein instanziiertes Objekt erneut instanziiert werden?

Funktion Personen() {}

const lili = neue Leute(); // Leute {}
const lucy = new lili.constructor(); // Personen {}

Da die Prototypenkette von Lili auf den People-Prototyp verweist, finden wir durch die Suche nach Eigenschaften nach oben schließlich den Konstruktor „Peopel selbst“ auf Peopel.prototype.

6

Welche seltsamen Dinge passieren beim Verschachteln von setTimeout?

console.log(0, Datum.jetzt());

setzeTimeout(() => {
 console.log(1, Datum.jetzt());
 setzeTimeout(() => {
  console.log(2, Datum.jetzt());
  setzeTimeout(() => {
   console.log(3, Datum.jetzt());
   setzeTimeout(() => {
    console.log(4, Datum.jetzt());
    setzeTimeout(() => {
     console.log(5, Datum.jetzt());
     setzeTimeout(() => {
      console.log(6, Datum.jetzt());
     });
    });
   });
  });
 });
});

Auf den Ebenen 0–4 beträgt das SetTimeout-Intervall 1 ms, während es auf Ebene 5 mindestens 4 ms beträgt.

7

es6-Funktion mit Standardparametern generiert Deklarationsumfang

var x = 10;

Funktion fn(x = 2, y = Funktion () { return x + 1 }) {
 var x = 5;
 gibt y zurück();
}

fn(); // 3

8

Funktionsnamen in Funktionsausdrücken (Nicht-Funktionsdeklarationen) können nicht überschrieben werden

const c = Funktion CC() {
 CC = 123;
 CC zurückgeben;
};

c(); // Funktion

Wenn Sie var CC = 123 festlegen, kann dies natürlich durch das Hinzufügen des Deklarationsschlüsselworts überschrieben werden.

9

Im strikten Modus ist this der Funktion undefiniert statt Window

// Nicht-strikte Funktion fn1() {
 gib dies zurück;
}
fn1(); // Fenster

// strikte Funktion fn2() {
 „streng verwenden“;
 gib dies zurück;
}
fn2(); // undefiniert

Bei modularisiertem Code, der mit webpack gepackt wurde, handelt es sich grundsätzlich um Code im strikten Modus.

10

Rundungsoperationen können auch mit bitweisen Operationen durchgeführt werden

var x = 1,23 | 0; // 1

Da bitweise Operationen nur 32-Bit-Ganzzahlen unterstützen, werden alle Dezimalstellen verworfen.

11

indexOf() muss keine Zahlen mehr vergleichen

const arr = [1, 2, 3];

// existiert, entspricht > -1
wenn (~arr.indexOf(1)) {

}

// existiert nicht, entspricht === -1
!~arr.indexOf(1);

Bitweise Operationen sind effizienter und der Code ist prägnanter. Sie können auch es6 include() verwenden. Wenn Sie beim Schreiben von Open-Source-Bibliotheken jedoch die Kompatibilität berücksichtigen müssen, ist es besser, indexOf zu verwenden.

12

Können Getter/Setter auch dynamisch gesetzt werden?

Klasse Hallo {
 _name = "lucy";
 
 getName() {
  gib diesen._Namen zurück;
 }
 
 // Statischer Getter
 ID abrufen() {
  Rückgabe 1;
 }
}

const hel = new Hallo();

hel.name; // undefiniert
hel.getName(); // lucy

// Dynamischer Getter
Hallo.prototype.__defineGetter__('name', function() {
 gib diesen._Namen zurück;
});

Hallo.prototype.__defineSetter__('Name', Funktion(Wert) {
 this._name = Wert;
});

hel.name; // lucy
hel.getName(); // lucy

hel.name = "jimi";
hel.name; // jimi
hel.getName(); // jimi

13

0,3 - 0,2 !== 0,1 // wahr

Gleitkommaoperationen sind nicht präzise, ​​was eine alltägliche Tatsache ist, aber der Fehler ist akzeptabel.

0,3 - 0,2 - 0,1 <= Zahl.EPSILON // wahr

14

Wie wird die Syntaxvereinfachung einer Klasse vererbt?

Funktion Super() {
 dies.a = 1;
}

Funktion Kind() {
 // Eigenschaftsvererbung Super.call(this);
 dies.b = 2;
}
// Prototyp-Vererbung Child.prototype = new Super();

const Kind = neues Kind();
kind.a; // 1

Bei der Prototypvererbung des formalen Codes wird die übergeordnete Klasse nicht direkt instanziiert, sondern eine leere Funktion, um eine wiederholte Deklaration dynamischer Eigenschaften zu vermeiden.

const erweitert = (Kind, Super) => {
 const fn = Funktion () {};
 
 fn.prototype = Super.prototype;
 Kind.Prototyp = neue Funktion();
 Kind.Prototyp.Konstruktor = Kind;
};

15

es6 kann Objekte tatsächlich wiederholt dekonstruieren

const obj = {
 A: {
  b: 1
 },
 c: 2
};

const { a: { b }, a } = obj;

Eine Codezeile erhält sowohl a als auch ab.
Wenn sowohl a als auch b mehrfach verwendet werden, besteht die allgemeine Logik darin, zuerst a und dann in der nächsten Zeile b zu dekonstruieren.

16

Es ist so cool zu beurteilen, ob der Code komprimiert ist

Funktion CustomFn() {}

const isCrashed = Typ von CustomFn.name === 'Zeichenfolge' und CustomFn.name === 'CustomFn';

17

Objekt === vergleicht Speicheradressen, während >= konvertierte Werte vergleicht.

{} === {} // falsch

// Implizite Konvertierung in String()
{} >= {} // wahr

18

Die Beurteilungsmethode von Instanceof besteht darin, ob sich der Prototyp in der Prototypenkette des aktuellen Objekts befindet.

Funktion Personen() {}
Funktion Mann() {}
Man.prototype = neue Leute();
Man.prototype.constructor = Mann;

const man = neuer Man();
man-Instanz von „People“; // wahr

//Ersetze den People-Prototyp People.prototype = {};
man-Instanz von People; // falsch

Wenn Sie die Klasse es6 verwenden, darf der Prototyp-Prototyp nicht neu definiert werden, sodass die oben genannte Situation nicht auftritt

19

Objekt.prototype.__proto__ === null; // wahr

Dies ist die oberste Ebene der Prototypenkette, ein Null

20

parseInt verursacht einen Fehler, wenn die Zahl zu klein ist

parseInt(0.00000000454); // 4
parseInt(10.23); // 10

einundzwanzig

1 + null // 1
1 + undefiniert // NaN

Zahl (null) // 0
Zahl (undefiniert) // NaN

zweiundzwanzig

Die tatsächlichen Parameter und die formalen Parameter behalten eine synchronisierte Beziehung bei

Funktion test(a, b, c) {
 console.log(a, b, c); // 2, 3, undefiniert
 
 Argumente[0] = 100;
 Argumente[1] = 200;
 Argumente[2] = 300;
 
 console.log(a, b, c); // 100, 200, undefiniert
}
Prüfung(2, 3);

Wenn die Anzahl der übergebenen tatsächlichen Parameter nicht ausreicht, schlägt auch die Synchronisierungsbeziehung fehl.
Sie können auch den strikten Modus verwenden, um dieses Verhalten zu vermeiden, sodass die Argumente einfach kopiert werden.

dreiundzwanzig

Void ist ein sturer alter Mann

void 0 === undefiniert // wahr
void 1 === undefiniert // wahr
void {} === undefiniert // wahr
void 'hallo' === undefiniert // wahr
void void 0 === undefiniert // wahr

Niemand ist mit irgendjemandem verwandt~~

vierundzwanzig

try/catch/finally haben auch eine bestimmte Ausführungsreihenfolge

Funktion fn1() {
 Konsole.log('fn1');
 Rückgabe 1;
}

Funktion fn2() {
 Konsole.log('fn2');
 Rückgabe 2;
}

Funktion getData() {
 versuchen {
  neuen Fehler werfen('');
 } fangen (e) {
  gibt fn1 zurück();
 Endlich
  fn2 zurückgeben();
 }
}

console.log(getData());

// Druckreihenfolge: 'fn1', 'fn2', 2

Wenn Sie im Try/Catch-Codeblock auf das Schlüsselwort „return xxyyzz;“ stoßen, wird zuerst „xxyyzz“ ausgeführt und der Wert in eine temporäre Variable eingefügt. Anschließend wird der Inhalt des Finally-Codeblocks ausgeführt und die temporäre Variable zurückgegeben.
Wenn in finally auch return aabbcc vorhanden ist, werden die neuen Daten aabbcc sofort zurückgegeben.

25

Gibt es eine Variable x, die mehreren Zahlen entspricht?

const x = {
 Wert: 0,
 zuString() {
  gibt ++diesen.Wert zurück;
 }
}

x == 1 && x == 2 && x == 3; // wahr

Mit der impliziten Konvertierung ist dies kein schwieriges Unterfangen.

26

Können „clearTimeout“ und „clearInterval“ austauschbar verwendet werden?

var timeout = setTimeout(() => console.log(1), 1000);
var Intervall = setInterval(() => console.log(2), 800);

Intervall löschen(Zeitüberschreitung);
clearTimeout(Intervall);

Die Antwort ist: JA. Die meisten Browser unterstützen gegenseitige Bereinigungstimer, es wird jedoch empfohlen, die entsprechende Bereinigungsfunktion zu verwenden.

27

Wie ist die Druckreihenfolge unten?

setzeTimeout(() => {
 konsole.log(1);
}, 0);

neues Versprechen((lösen) => {
 konsole.log(2);
 lösen();
}).then(() => console.log(3));

Funktion ruf mich an() {
 konsole.log(4);
}

(asynchron () => {
 warte auf callMe();
 konsole.log(5);
})();

Die Antwort lautet: 2, 4, 3, 5, 1

Hauptquest: 2, 4
Mikroaufgaben: 3, 5
Makroaufgaben: 1

28

null ist vom Objekttyp, erbt aber nicht von Object. Es handelt sich eher um einen historischen Fehler. Angesichts der Tatsache, dass so viele Leute diese Funktion nutzten, würde die Behebung dieser Störung Tausende von Programmen zum Absturz bringen.

Typ von null === 'Objekt'; // wahr
Object.prototype.toString.call(null); // [Objekt Null]
null-Instanz des Objekts; // falsch

29

Beim Bearbeiten von Basistypen (außer Null und Undefiniert) verpackt die Engine die Daten automatisch in Objekte und zerstört die Objekte nach dem Vorgang.

'abc'.substr(1);
(123).toFixed(2);

Alle hinzugefügten Daten werden zerstört, sofern die Prototypenkette nicht geändert wird.

const-Daten = "abc";
Daten.x = "y";
console.log(data.x); // undefiniert

data.__proto__.x = "z";
console.log(data.x); // 'z'

30

Daten werden unsicher, wenn sie den Sicherheitswert überschreiten

Zahl.MAX_SAFE_INTEGER + 1 === Zahl.MAX_SAFE_INTEGER + 2; // wahr

// entspricht 2 ** 53 === 2 ** 53 + 1; // wahr

31

Wenn Funktionsparameter Standardwerte haben, ändern sich einige Wahrnehmungen

Funktion test(a, b = 1) {
 // Alias-Synchronisierung, im nicht strikten Modus wird eine Synchronisierung erwartet. Argumente[0] = 20;
 konsole.log(a); // 2
}
//Überprüfen Sie die Anzahl der Funktionsparameter, der erwartete Wert ist: 2
console.log(test.länge); // 1

Prüfung(123);

32

Alle Zahlen sind Gleitkommazahlen. Bei der Durchführung bitweiser Operationen konvertiert js zuerst die Zahl in den Typ int. Im Vergleich zu anderen Sprachen ist dies ein zusätzlicher Leistungsaufwand.

1 | 0 // 1
1,234 | 0 // 1
1,234 | 0,6 // 1

1 & 1 // 1
1,23 und 1,456 // 1

~1 // -2
~1,234 // -2

33

Die Zuordnung zum Standort kann direkt erfolgen

Standort = „http://baidu.com“;

34

Kennen Sie eine weitere Verwendung von „neu“?

Funktion Test() {
 konsole.log(neu.ziel === Test); // wahr
}

neuer Test();

Wenn eine Unterklasse instanziiert wird, ist new.target nicht Test. Diese Methode kann den Effekt einer abstrakten Klasse erzielen.

35

Es gibt einen Unterschied zwischen +0 und -0

1/+0 === Unendlich
1/-0 === -Unendlich

Oben sind die Details des seltsamen Wissens in Javascript aufgeführt. Wissen Sie Bescheid? Weitere Informationen zu seltsamem Wissen in Javascript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!