Detaillierte Erläuterung der fehleranfälligen JavaScript-Wissenspunkte

Vorwort

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 die Funktion Parameter, Abschluss Probleme sowie das Kopieren und Zuweisen von Objekten werden von der Oberfläche zur Tiefe eingeführt und erklärt, was auch einige ES6-Wissenspunkte beinhaltet.

JavaScript-Wissenspunkte

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 die Ausgabe undefiniert ist.

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 Funktionsbereich verwendet, um die Variable b neu zu deklarieren. Im Gegensatz zu var hat let nicht die Funktion der Variablenheraufstufung, daher ist der Ausgabefehler b nicht definiert.

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 innerhalb der Funktion nicht im Blockebenenbereich befindet , 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 , sodass die Konsole falsch ist.

var arr = [],
    arr2 = {};

console.log(typeof(arr) === typeof(arr2)); // true

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 = [];

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 obigen Objektmethode 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

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 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(Array.prototype.slice.call(arguments)); // [1, 2]
}

test6(1, 2);

Das Obige verwendet das Argument-Array-Objekt in der Funktion, um das an die Funktion übergebene Parameter-Array zu erhalten, sodass das Ausgabe-Array [1, 2] ist.

function test7 () {
    return function () {
        console.log(Array.prototype.slice.call(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, wird [3, 4] ausgegeben.

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

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('p'); // 如果页面上有5个p

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

Das oben genannte ist ein sehr häufiges Abschlussproblem. Der Wert, der angezeigt wird, wenn Sie auf ein beliebiges p klicken, ist immer 5, da der Wert von i, wenn Sie Das Klickereignis auslösen Es ist bereits 5 und kann auf folgende Weise gelöst werden:

var elem = document.getElementsByTagName('p'); // 如果页面上有5个p

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 i an die 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 so das Namensattribut von newObj geändert, aber auch das Namensattribut des obj-Objekts 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.

Das Obige ist eine detaillierte Erklärung der fehleranfälligen JavaScript-Wissenspunkte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).