Eine Zusammenstellung einiger JavaScript-Wissenspunkte, bei denen leicht Fehler gemacht werden können

Vorwort

Dieser Artikel enthält einige fehleranfällige Wissenspunkte, die ich beim Erlernen von JavaScript gesammelt und organisiert habe. Er behandelt den Variablenbereich und den Typvergleich Zeiger und Funktion werden von der oberflächlichen Seite zur tieferen Ebene 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();

Werte im Funktionsbereich deklarieren und zuweisen über a und über der Konsole, sodass die Ausgabe a nach dem Proximity-Prinzip gleich 2 ist.

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“ angezeigt. 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 innerhalb der Funktion nicht im Blockebenenbereich befindet , also Ausgabe 1.

2. Typvergleich

var arr = [],
    arr2 = [1];

console.log(arr === arr2); // false

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

var arr = [],
    arr2 = [];

console.log(arr === arr2); // false

Vergleichen Sie die beiden oben genannten identischen Arrays, da der Vergleich zwischen Array und Array immer falsch ist, 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 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

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

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 p 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('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 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.

Das obige ist der detaillierte Inhalt vonEine Zusammenstellung einiger JavaScript-Wissenspunkte, bei denen leicht Fehler gemacht werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!