Compilation de points de connaissances JavaScript sujets aux erreurs

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, ce pointeur, paramètre de fonction. , et clôture. Les six aspects des problèmes, de la copie d'objets et de l'affectation sont présentés et expliqués du moins profond au plus profond, amenant chacun à voir clairement les zones sujettes aux erreurs de JavaScript , afin que nous puissions écrire JavaScript code plus joyeusement.

Points de connaissance JavaScript

1. Portée de la variable

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

Le < ci-dessus 🎜 >A est déclaré et attribué dans la portée de la fonction , et il se trouve 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, mais qu'il se trouve sous la console, la variable a est promue et elle est déclarée mais pas encore affectée, donc la sortie n'est pas définie.

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 Contrairement à var, let n'a pas la fonction de promotion de variable, donc l'erreur de sortie b n'est pas définie.

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. Parce que deux tableaux distincts ne sont jamais égaux, 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.this 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 sorti.

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

La méthode dans l'objet est affectée à une variable ci-dessus. À ce stade, celle-ci dans la méthode ne pointera plus vers l'objet obj, et 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(Array.prototype.slice.call(arguments)); // [1, 2]
}
test6(1, 2);

Ce qui précède utilise l'objet tableau d'arguments dans la fonction pour obtenir le paramètre

tableau passé dans la fonction , donc la sortie Array[1, 2].

function test7 () {
    return function () {
        console.log(Array.prototype.slice.call(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. Si test7(1, 2)(3, 4) est exécuté, [3, 4] sera affiché.

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

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('div'); // 如果页面上有5个div
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. Cliquez sur n'importe quel div pour apparaître. la valeur C'est toujours 5, car lorsque vous déclenchez l'événement click, la valeur de i est déjà 5. Cela peut être résolu de la manière suivante :

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

Encapsuler une fonction d'exécution immédiate en dehors du clic lié événement et passe i Entrez simplement cette 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 newObj. L'attribut name, mais l'attribut name de l'objet obj est également falsifié, 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.

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

Recommandations associées :

Analyse d'instance de méthode membre de définition orientée objet Javascript

Méthodes de gestion des exceptions JavaScript

Mode d'apparence JavaScript

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!