Zusammenstellung gängiger Wissenspunkte zu JavaScript-Fehlern

1. Variablenbereich

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

A wird im obigen Funktionsbereich deklariert und zugewiesen und befindet sich über der Konsole. Befolgen Sie daher die nächstgelegene Der Hauptausgang a ist gleich 2.

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

Obwohl a im obigen Funktionsumfang deklariert und zugewiesen ist, befindet es sich unter der Konsole. Die a-Variable wird heraufgestuft und deklariert, aber noch nicht zugewiesen, sodass „undefiniert“ ausgegeben wird.

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

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

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

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, daher wird der Ausgabefehler „b ist nicht definiert“ ausgegeben. wird gemeldet.

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

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

2. Typvergleich

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

Vergleich von zwei verschiedenen Arrays oben, Konsole ist falsch.

var arr = [], 
    arr2 = []; 
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(typeof(arr) === typeof(arr2)); // true

Das Obige verwendet typeof, um Arrays und Objekte zu vergleichen. Da typeof NULL erhält, sind alle Array- und Objekttypen Objekte, sodass die Konsole wahr ist.

var arr = []; 
console.log(arr instanceof Object); // true 
console.log(arr instanceof Array); // 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.

3. Dies zeigt auf

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

Dies zeigt in der Objektmethode oben auf das Objekt selbst, sodass „xiaoming“ ausgegeben wird.

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

Das Obige weist die Methode im Objekt einer Variablen zu. Zu diesem Zeitpunkt zeigt diese in der Methode nicht mehr auf das Objekt obj und somit auf das Fensterobjekt, also auf die Konsole "undefiniert".

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

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.

4. Funktionsparameter

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

Das Obige verwendet das Argumentobjekt in der Funktion, um das an die Funktion übergebene Parameterarray zu erhalten, sodass das Ausgabearray [ 1, 2].

function test7 () { 
    return function () { 
        console.log(arguments); // 未执行到此，无输出 
    } 
} 
test7(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, erfolgt die Ausgabe [3, 4].

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

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].

5. Abschlussproblem

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

Der Wert, der angezeigt wird, wenn Sie auf ein beliebiges Div klicken, ist immer 5, weil Wenn Sie den Klick auslösen, ist der Wert von i zum Zeitpunkt des Ereignisses bereits 5, was auf folgende Weise gelöst werden kann:

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); 
}

Kapseln Sie eine Funktion zur sofortigen Ausführung außerhalb des gebundenen Klickereignisses und übergeben Sie sie Ich bin in der Funktion.

6. Kopieren und Zuweisen von Objekten

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

Oben haben wir das obj-Objekt dem newObj-Objekt zugewiesen und dadurch das Namensattribut von newObj geändert, aber den Namen von Die Eigenschaften des obj-Objekts werden ebenfalls 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 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'

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 obj3 = { 
    name: 'xiaoming', 
    age: 23 
}; 
var newObj3 = Object.create(obj3); 
newObj3.name = 'xiaohua'; 
console.log(obj3.name); // 'xiaoming' 
console.log(newObj3.name); // 'xiaohua'

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.

Fazit

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.