Zusammenstellung von JavaScript-fehleranfälligen Wissenspunkten

Dieser Artikel enthält einige fehleranfällige Wissenspunkte, die ich beim Erlernen von JavaScript gesammelt und organisiert habe. Er behandelt den Variablenbereich, den Typvergleich, diesen Zeiger und Funktionsparameter , und Abschluss. Die sechs Aspekte von Problemen, Objektkopieren und Zuweisung werden von der Oberfläche bis in die Tiefe eingeführt und erklärt, sodass jeder die fehleranfälligen Bereiche von JavaScript klar erkennen kann und es uns ermöglicht, JavaScript -Code glücklicher.

JavaScript-Wissenspunkte

1. Variabler Umfang

var a = 1;
function test() {
    var a = 2;
    console.log(a); // 2
}
test();

Das A wird im Funktionsumfang

deklariert und zugewiesen und befindet sich über der Konsole, sodass die Ausgabe a nach dem Proximity-Prinzip gleich 2 ist.

Obwohl a im obigen Funktionsumfang deklariert und zugewiesen wird, befindet es sich unter der Konsole und die a-Variable wird heraufgestuft. Sie wurde deklariert, ihr wurde jedoch während der Ausgabe kein Wert zugewiesen Die Ausgabe ist undefiniert.

var a = 1;
function test2() {
    console.log(a); // undefined
    var a = 2;
}
test2();

A im obigen Funktionsumfang wird neu zugewiesen, nicht neu deklariert und befindet sich unter der Konsole, sodass a im globalen Geltungsbereich ausgegeben wird.

var a = 1;
function test3() {
    console.log(a); // 1
    a = 2;
}
test3();

Das ES6-let wird im obigen Funktionsumfang verwendet, um die Variable b neu zu deklarieren. Im Gegensatz zu var hat let jedoch nicht die Funktion der Variablenheraufstufung, sodass der Ausgabefehler b nicht definiert ist.

let b = 1;
function test4() {
    console.log(b); // b is not defined
    let b = 2;
}
test4();

Im obigen Funktionsbereich wird let verwendet, um a als 1 zu deklarieren, und a wird im Blockebenenbereich als 2 deklariert, da sich die Konsole innerhalb der Funktion nicht im Blockebenenbereich befindet , also Ausgabe 1.

function test5() {
    let a = 1;
    {
        let a = 2;
    }
    console.log(a); // 1
}
test5();

2. Typvergleich

Vergleichen Sie zwei verschiedene Arrays oben, die Konsole ist falsch.

var arr = [],
    arr2 = [1];
console.log(arr === arr2); // false

Vergleichen Sie die beiden identischen Arrays oben. Da zwei separate Arrays niemals gleich sind, ist die Konsole falsch.

var arr = [],
    arr2 = [];
console.log(arr === arr2); // false

Verwenden Sie typeof, um die oben genannten Arrays und Objekte zu vergleichen. Da typeof NULL erhält, sind alle Array- und Objekttypen Objekte, sodass die Konsole wahr ist.

var arr = [],
arr2 = {};
console.log(typeof(arr) === typeof(arr2)); // true

Oben wird „instanceof“ verwendet, um zu bestimmen, ob eine Variable zu einer Instanz eines Objekts gehört. Da Arrays auch ein Objekttyp in JavaScript sind, sind beide Konsolen wahr.

var arr = [];
console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

3.Dies zeigt auf

Dies zeigt in der obigen Objektmethode auf das Objekt selbst, sodass Xiaoming ausgegeben wird.

var obj = {
    name: 'xiaoming',
    getName: function () {
        return this.name
    }
};
console.log(obj.getName());  // 'xiaoming'

Die Methode im Objekt wird einer Variablen oben zugewiesen. Zu diesem Zeitpunkt zeigt diese in der Methode nicht mehr auf das Objekt obj und somit auf das Fensterobjekt, sondern auf die Konsole undefiniert.

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};
var nameFn = obj.getName;
console.log(nameFn()); // undefined

Die Methode im obj-Objekt ist auch der Variablen nameFn oben zugewiesen, diese wird jedoch über die apply-Methode auf das obj2-Objekt verwiesen, sodass die endgültige Konsole xiaohua ist.

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};
var obj2 = {
    myName: 'xiaohua'
};
var nameFn = obj.getName;
console.log(nameFn.apply(obj2)); // 'xiaohua'

4. Funktionsparameter

Das Obige verwendet das Argument-Array-Objekt in der Funktion, um das Parameter-Array

function test6() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2]
}
test6(1, 2);

zu erhalten, das an die Funktion

übergeben wird , also das Ausgabe-Array[1, 2].

Das Obige verwendet auch Argumente, um Parameter zu erhalten, aber da test7(1, 2) die Funktion nicht im Gegenzug ausführt, gibt es keine Ausgabe. Wenn test7(1, 2)(3, 4) ausgeführt wird, wird [3, 4] ausgegeben.

function test7 () {
    return function () {
        console.log(Array.prototype.slice.call(arguments)); // 未执行到此，无输出
    }
}
test7(1, 2);

Das Obige verwendet die Methode Array.prototype.push.call(), um 3 und 4 in das args-Array einzufügen, und verwendet den ES6-Spread-Operator (...), um das Array zu erweitern und zu übergeben es in test9, also ist die Konsole [1, 2, 3, 4].

var args = [1, 2];
function test9() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2, 3, 4]
}
Array.prototype.push.call(args, 3, 4);
test9(...args);

5. Schließungsproblem

Das oben genannte ist ein sehr häufiges Schließungsproblem. Klicken Sie auf ein beliebiges Div, um es aufzurufen Der Wert It ist immer 5, denn wenn Sie das Klickereignis auslösen, ist der Wert von i bereits 5. Dies kann auf folgende Weise gelöst werden:

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div
for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

Kapseln Sie eine Funktion zur sofortigen Ausführung außerhalb des gebundenen Klicks event und pass i Geben Sie einfach diese Funktion ein.

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div
for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}

6. Kopieren und Zuweisen von Objekten

Oben haben wir das obj-Objekt dem newObj-Objekt zugewiesen und so newObj geändert Das Namensattribut, aber auch das Namensattribut des obj-Objekts wird manipuliert. Dies liegt daran, dass das newObj-Objekt tatsächlich nur eine Speicheradresse und keine echte Kopie erhält, sodass das obj-Objekt manipuliert wird.

var obj = {
    name: 'xiaoming',
    age: 23
};
var newObj = obj;
newObj.name = 'xiaohua';
console.log(obj.name); // 'xiaohua'
console.log(newObj.name); // 'xiaohua'

Durch die Verwendung der oben genannten Methode Object.assign() zum Erstellen einer tiefen Kopie des Objekts kann die Möglichkeit einer Manipulation des Quellobjekts vermieden werden. Weil die Methode Object.assign() eine beliebige Anzahl der aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt kopieren und dann das Zielobjekt zurückgeben kann.

var obj2 = {
    name: 'xiaoming',
    age: 23
};
var newObj2 = Object.assign({}, obj2, {color: 'blue'});
newObj2.name = 'xiaohua';
console.log(obj2.name); // 'xiaoming'
console.log(newObj2.name); // 'xiaohua'
console.log(newObj2.color); // 'blue'

Wir können auch die Methode Object.create() verwenden, um ein Objekt zu kopieren. Die Methode Object.create() kann ein neues Objekt mit dem angegebenen Prototypobjekt und den angegebenen Eigenschaften erstellen.

var obj3 = {
    name: 'xiaoming',
    age: 23
};
var newObj3 = Object.create(obj3);
newObj3.name = 'xiaohua';
console.log(obj3.name); // 'xiaoming'
console.log(newObj3.name); // 'xiaohua'

Das Erlernen von JavaScript ist ein langer Prozess und kann nicht über Nacht erledigt werden. Ich hoffe, dass die in diesem Artikel vorgestellten Punkte den Schülern, die JavaScript lernen, helfen können, ein tieferes Verständnis und eine bessere Beherrschung der JavaScript-Syntax zu erlangen und Umwege zu vermeiden.

Verwandte Empfehlungen:

Instanzanalyse der objektorientierten Javascript-Definitionsmitgliedsmethode

Methoden zur Behandlung von JavaScript-Ausnahmen

JavaScript-Darstellungsmodus

Das obige ist der detaillierte Inhalt vonZusammenstellung von JavaScript-fehleranfälligen Wissenspunkten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!