Une compilation de quelques points de connaissances JavaScript faciles à commettre des erreurs

Avant-propos

Cet article contient quelques points de connaissances sujets aux erreurs que j'ai collectés et organisés au cours du processus d'apprentissage de JavaScript. Il couvrira la portée des variables, la comparaison de types, etc. pointeur et fonction.Les six aspects des paramètres, des problèmes de fermeture, de la copie et de l'affectation des objets sont présentés et expliqués du moins profond au plus profond, ce qui implique également certains points de connaissance ES6.

Points de connaissance JavaScript

1. Portée de la variable

var a = 1;
function test() {
    var a = 2;

    console.log(a); // 2
}

test();

Déclarer et attribuer des valeurs dans la portée de la fonction. au dessus de a, et il est au dessus de la console, donc la sortie a est égale à 2 suivant le principe de proximité.

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

    var a = 2;
}

test2();

Bien que a soit déclaré et attribué dans la portée de la fonction ci-dessus, il se trouve sous la console. La variable a est promue et est déclarée mais pas encore assignée, donc "indéfini" est affiché.

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

    a = 2;
}

test3();

A dans la portée de la fonction ci-dessus est réaffecté, non redéclaré, et est situé sous la console, donc a dans la portée globale est généré.

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

    let b = 2;
}

test4();

Le let ES6 est utilisé dans la portée de la fonction ci-dessus pour redéclarer la variable b. Cependant, contrairement à var, let n'a pas la fonction de promotion de variable, donc l'erreur de sortie "b n'est pas définie". est signalé.

function test5() {
    let a = 1;

    {
        let a = 2;
    }

    console.log(a); // 1
}

test5();

Dans la portée de la fonction ci-dessus, let est utilisé pour déclarer a comme 1, et a est déclaré comme 2 dans la portée au niveau du bloc, car la console n'est pas dans la portée au niveau du bloc dans la fonction , donc Sortie 1.

2. Comparaison de types

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

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

Comparez deux tableaux différents ci-dessus, la console est fausse.

var arr = [],
    arr2 = [];

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

Comparez les deux tableaux identiques ci-dessus, car la comparaison entre tableau et tableau est toujours fausse, donc la console est fausse.

var arr = [],
    arr2 = {};

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

Utilisez typeof pour comparer les tableaux et les objets ci-dessus. Parce que typeof obtient NULL, les types de tableaux et d'objets sont tous des objets, donc la console est vraie.

var arr = [];

console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

Ce qui précède utilise instanceof pour déterminer si une variable appartient à une instance d'un objet. Étant donné que les tableaux sont également un type d'objet en JavaScript, les deux consoles sont vraies.

3. cela pointe vers

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

console.log(obj.getName());  // 'xiaoming'

Ceci dans la méthode objet ci-dessus pointe vers l'objet lui-même, donc "xiaoming" est affiché.

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};

var nameFn = obj.getName;

console.log(nameFn()); // undefined

Ce qui précède attribue la méthode dans l'objet à une variable. À ce stade, celle-ci dans la méthode ne pointera plus vers l'objet obj, et pointe donc vers l'objet window, donc la console est. "indéfini".

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};

var obj2 = {
    myName: 'xiaohua'
};

var nameFn = obj.getName;

console.log(nameFn.apply(obj2)); // 'xiaohua'

La méthode dans l'objet obj est également affectée à la variable nameFn ci-dessus, mais celle-ci est pointée vers l'objet obj2 via la méthode apply, donc la console finale est 'xiaohua'.

4. Paramètres de la fonction

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

test6(1, 2);

Ce qui précède utilise l'objet arguments dans la fonction pour obtenir le tableau de paramètres transmis à la fonction, le tableau de sortie est donc [ 1, 2].

function test7 () {
    return function () {
        console.log(arguments); // 未执行到此，无输出
    }
}

test7(1, 2);

Ce qui précède utilise également des arguments pour obtenir des paramètres, mais comme test7(1, 2) n'exécute pas la fonction en retour, il n'y a pas de sortie If test7(1, 2)(3, 4. ) est exécuté, il y aura une sortie [3, 4].

var args = [1, 2];

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

Array.prototype.push.call(args, 3, 4);

test9(...args);

Ce qui précède utilise la méthode Array.prototype.push.call() pour insérer 3 et 4 dans le tableau args, et utilise l'opérateur de propagation ES6 (...) pour développer le tableau et transmettre dans test9, donc la console est [1, 2, 3, 4].

5. Problème de fermeture

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

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

Ce qui précède est un problème de fermeture très courant. La valeur qui apparaît lorsque vous cliquez sur un p est toujours 5, car. lorsque vous déclenchez le clic La valeur de i est déjà 5 au moment de l'événement, ce qui peut être résolu de la manière suivante :

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

Encapsulez une fonction d'exécution immédiate en dehors de l'événement de clic lié, et passez je suis dans la fonction.

6. Copie et affectation d'objets

var obj = {
    name: 'xiaoming',
    age: 23
};

var newObj = obj;

newObj.name = 'xiaohua';

console.log(obj.name); // 'xiaohua'
console.log(newObj.name); // 'xiaohua'

Ci-dessus, nous avons attribué l'objet obj à l'objet newObj, modifiant ainsi l'attribut name de newObj, mais le nom de l'objet obj Les propriétés sont également falsifiées, car l'objet newObj n'obtient en réalité qu'une adresse mémoire, pas une copie réelle, donc l'objet obj est falsifié.

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'

L'utilisation de la méthode Object.assign() ci-dessus pour effectuer une copie complète de l'objet peut éviter la possibilité de falsification de l'objet source. Parce que la méthode Object.assign() peut copier n'importe quel nombre de propriétés énumérables de l'objet source vers l'objet cible, puis renvoyer l'objet cible.

var obj3 = {
    name: 'xiaoming',
    age: 23
};

var newObj3 = Object.create(obj3);

newObj3.name = 'xiaohua';

console.log(obj3.name); // 'xiaoming'
console.log(newObj3.name); // 'xiaohua'

Nous pouvons également utiliser la méthode Object.create() pour copier un objet. La méthode Object.create() peut créer un nouvel objet avec l'objet prototype et les propriétés spécifiés.

Conclusion

L'apprentissage de JavaScript est un long processus et ne peut pas être accompli du jour au lendemain. J'espère que les points introduits dans cet article pourront aider les étudiants qui apprennent JavaScript à mieux comprendre et maîtriser la syntaxe JavaScript et à éviter les détours.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!