Jetez un œil à ces questions d'entretien préliminaires pour vous aider à maîtriser les points de connaissances à haute fréquence (7)

10 questions chaque jour, après 100 jours, vous maîtriserez tous les points de connaissances à haute fréquence des entretiens front-end, allez ! ! ! , en lisant l'article, j'espère que vous ne regardez pas directement la réponse, mais demandez-vous d'abord si vous la connaissez, et si oui, quelle est votre réponse ? Pensez-y et comparez-la avec la réponse. Serait-ce mieux ? Bien sûr, si vous avez une meilleure réponse que la mienne, veuillez laisser un message dans la zone de commentaire et discuter ensemble de la beauté de la technologie.

Intervieweur : S'il vous plaît, parlez du problème de ce pointage dans JS

Moi : Euh~, nous savons qu'il y a une règle là-dedans selon laquelle celui qui l'appelle désigne qui, cette phrase mènera subtilement à Nous avons quelques malentendus. Nous résumons maintenant les erreurs possibles comme suit et fournissons le code :

1) Nous devons savoir que si nous obtenons cela dans la situation globale, cela pointera vers Windows, car nous l'utilisons dans la situation globale. situation. Tout sera monté à la fenêtre.

<script>
    console.log(this) // 指向window
    function a(){
        console.log(this)
    }
    a() // 相当于 window.a()，指向的依旧是 window
</script>

2) J'ai besoin de savoir que le but de ceci pointera vers l'appelant précédent. Le code est le suivant :

Après avoir lu le code, nous savons que bien que la fonction d soit essentiellement appelée à cause de a, il y a. toujours une couche de c au milieu. La fonction d est appelée, donc cela pointe vers le niveau supérieur et il y a un principe de proximité. C'est très important ! ! !

<script>
    var a = {
        b:10,
        c:{
            b:12,
            d:function(){
                console.log(this)
            }
        }
    }
    a.c.d() // {b: 12, d: ƒ}
</script>

3) Nous devons savoir que la fonction flèche n'a pas de portée, ce qui signifie qu'elle n'a pas son propre ceci. C'est toujours cela qui pointe vers le niveau supérieur. Voici une question d'entretien d'une grande usine. Pouvez-vous deviner quel est le résultat final imprimé ?

En supposant que vous ayez lu attentivement cette question d'entretien, je pense que vous savez déjà que la réponse est 66. Pourquoi ? , vous devez savoir que la fonction flèche n'a pas son propre this, elle doit donc aller au niveau supérieur pour trouver cela, et le niveau supérieur est dans la portée globale, donc ce qui est imprimé est le numéro d'identification monté globalement 66.

<script>
    var id = 66
    function a(){
        setTimeout(()=>{
            console.log(this.id)
        },500)
    }
    a({id:22}) // 猜猜结果是什么？
</script>

Alors comment pouvons-nous

changer la direction de ceci et contrôler cela pour pointer vers le résultat que nous voulons ? Les trois méthodes suivantes sont proposées :

<script>
    var id = 66
    function a(){
        setTimeout(()=>{
            console.log(this.id || this)
        },500)
    }
    // call => {} 改变之后并执行一次
    a.call({id:22}) // 打印22 

    // apply => [] 改变之后并执行一次
    a.apply([12]) // 打印 [12]

    // bind() 不调用，只改变this指向
    a.bind(a(id=32)) // 32
</script>

Intervieweur : Parlez-moi des fonctions et des différences de call apply bind ?

Moi : Euh~, d'accord, le résumé est le suivant :

call apply bind trois méthodes

peuvent toutes être utilisées pour modifier le pointeur this de la fonction, les différences spécifiques sont les suivantes : 1) fn.call (newThis ,params) Le premier paramètre de la fonction d'appel est le nouveau pointeur de this, puis les paramètres à utiliser par la fonction fn sont transmis séquentiellement. La fonction fn sera exécutée immédiatement.

2) fn.apply (newThis,paramsArr) Le premier paramètre de la fonction apply est le nouveau pointeur de ceci, et le deuxième paramètre est le tableau de paramètres à utiliser par fn, et la fonction fn sera exécutée immédiatement.

3) fn.bind (newThis,params) Le premier paramètre de la fonction bind est le nouveau pointeur de this. Les paramètres suivants peuvent être passés directement ou sous forme de tableau. La fonction fn ne sera pas exécutée immédiatement et le pointage de la fonction fn ne peut être modifié qu'une seule fois. Les modifications ultérieures utilisant bind ne seront pas valides. Ce qui est renvoyé est le nouveau fn qui a changé le but de ceci

Intervieweur : S'il vous plaît, parlez de votre compréhension de la délégation d'événements

Moi : Euh~, d'accord, la délégation d'événements utilise le bouillonnement d'événements et ne spécifie qu'un seul gestionnaire d'événements. peut gérer tous les événements d'un certain type. Pour parler franchement, cela signifie rattacher des événements qui ne se sont pas encore produits à des événements qui se sont déjà produits. Le code complet est le suivant :

<body>
<ul id="ul">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<button id="btn">点我添加一个li</button>
<script>
    // 事件委托
    let ul = document.getElementById("ul")
    ul.addEventListener('click',(event)=>{
        console.log(event)
        event = event || window.event
        let target = event.target
        if(target.nodeName == 'LI'){
            alert(target.innerHTML)
        }
    })

    let btn = document.getElementById('btn')
    btn.addEventListener('click',()=>{
        let li = document.createElement('li')
        li.textContent = ul.children.length
        ul.appendChild(li)
    })
</script>
</body>

Intervieweur : Dites-moi ce qu'est une promesse et comment l'utiliser ?

Moi : Euh~, d'accord, Promise est un constructeur fourni par ES6. Vous pouvez utiliser le constructeur Promise new pour créer une instance. Le constructeur Promise reçoit une fonction en paramètre. Cette fonction a deux paramètres, respectivement. Les fonctions resolve et reject, resolve changent l'état de Promise d'attente à succès, et passent le résultat de l'opération asynchrone en paramètre reject change l'état de ; en attente de succès Échec, appelé lorsqu'une opération asynchrone échoue et que l'erreur signalée par l'opération asynchrone est passée en paramètre. Une fois l'instance créée, vous pouvez utiliser la méthode then pour spécifier respectivement les fonctions de rappel de réussite ou d'échec, ou vous pouvez utiliser catch pour capturer l'échec, then et catch finalement renvoie une Promise , afin qu'elle puisse être appelée dans une chaîne.

Le rôle de Promise :

Promise est une micro-tâche asynchrone, qui résout le problème des rappels imbriqués multicouches asynchrones, rendant le code plus lisible et plus facile à maintenir. Utilisation de Promise

Caractéristiques de Promesse  :

1) L'état de l'objet n'est pas affecté par le monde extérieur

2) Une fois l'état modifié, il ne changera plus, et le résultat peut être obtenu à tout moment

3) Les paramètres de la méthode de résolution sont les paramètres de la fonction de rappel dans then, les paramètres de la méthode de rejet sont les paramètres de catch

4) Tant que la méthode then et la méthode catch ne signalent pas d'erreur, elles renverront un promesse pleinement remplie

Scénario d'application :

Résoudre le problème de rappel de l'enfer

Pour des méthodes d'utilisation spécifiques, veuillez vous référer à mon article précédent : Comprendre la promesse en JS dans un article

Intervieweur : Dites-moi quoi le cross-domain est-il ? Comment résoudre les problèmes cross-domaines ?

Moi : Euh, ok, le résumé est le suivant :

C'est quoi le cross-domain :

L'adresse demandée par une interface dans la page courante et l'adresse de la page courante si protocole, nom de domaine, port parmi eux Il y a une différence, c'est que l'interface est inter-domaine.
Raisons des restrictions inter-domaines :

Afin d'assurer la sécurité des pages Web, le navigateur dispose d'une politique de protocole de même origine.

Solution inter-domaines :

cors :

La solution la plus couramment utilisée à l'heure actuelle est de permettre une implémentation inter-domaines en configurant le backend.
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

Middleware de nœud, proxy inverse nginx :

Le navigateur ne peut pas accéder au serveur entre domaines lorsqu'il existe des restrictions entre domaines. Le middleware de nœud et le proxy inverse nginx permettent tous deux d'envoyer des requêtes aux serveurs proxy, aux pages statiques et aux serveurs proxy. est de la même origine, puis le serveur proxy envoie une requête au serveur back-end. Il n'y a aucune restriction d'homologie entre le serveur et le serveur.
JSONP : Le principe utilisé par

est que les balises de script peuvent demander des ressources sur plusieurs domaines et que la fonction de rappel est intégrée à l'URL en tant que paramètre. Le backend reçoit la demande, appelle la fonction de rappel et renvoie les données en tant que paramètre. Faites attention à définir l'en-tête de réponse pour renvoyer le type de document, qui doit être défini sur javascript.

Intervieweur : De combien de méthodes JavaScript dispose-t-il pour déterminer le type d'une variable ?

Moi : Eh bien, d'accord, JavaScript dispose de 4 méthodes pour déterminer le type de variables, résumées comme suit :

typeof :

est souvent utilisé pour déterminer les types de données de base, dans. En plus de la fonction, la fonction renvoie « fonction » et toutes les autres renvoient « objet ».

instanceof :

est principalement utilisé pour distinguer les types de données de référence. La méthode de détection est que le type détecté est sur la chaîne de prototypes de l'instance actuelle et que les résultats détectés par celui-ci sont tous vrais

.

Object.prototype.toString.call()(méthode de jugement de chaîne de prototype d'objet) :

Applicable à tous les types de détection de jugement, la méthode de détection est Object.prototype.toString.call(data) et renvoie les données tapez une chaîne.

constructor (pour les types de données de référence) :

est utilisé pour détecter les types de données de référence. La méthode de détection consiste à obtenir le constructeur de l'instance pour déterminer si elle est identique à une certaine classe. pareil, cela signifie que les données sont conformes à ce type de données, cette méthode n'ajoutera pas d'autres classes sur la chaîne prototype, évitant ainsi les interférences de la chaîne prototype.

Interviewer : Parlez-moi de la méthode d'implémentation asynchrone en JS ?

Moi : Euh~, d'accord, toutes les tâches asynchrones sont retirées de la file d'attente des tâches et exécutées séquentiellement une fois l'exécution de la tâche synchrone terminée. Les moyens courants pour réaliser une implémentation asynchrone sont les suivants :

Fonction de rappel, écoute d'événements, setTimeout (minuterie), Promise, async/await, générateur de générateur

Intervieweur : Quelles sont les méthodes de déduplication des tableaux ?

Moi : Euh~, il existe de nombreuses façons de supprimer les doublons des tableaux. Voici quelques exemples et explications simples, comme suit :

Utilisez la clé d'attribut d'objet pour exclure les doublons :

Parcourez le. tableau, à chaque fois Déterminez si l'attribut existe dans l'objet. S'il n'existe pas, stockez-le dans un nouveau tableau, utilisez l'élément du tableau comme clé, définissez une valeur, stockez-le dans l'objet et enfin renvoyez le nouveau tableau. .

Utilisez les données de type Set pour n'avoir aucun doublon :

nouveau un Set, le paramètre est un tableau qui doit être dédupliqué. Set supprimera automatiquement les éléments en double, puis convertira le Set en un tableau et le renverra. .

filter+indexof déduplication :

Utilisez la propre méthode de filtrage d'Array pour renvoyer arr.indexOf(num) égal au nombre d'index.

reduce +includes deduplication :

Utilisez réduire pour parcourir et transmettre un tableau vide en tant que nouveau tableau après la déduplication, puis déterminer en interne si l'élément actuellement parcouru existe dans le nouveau tableau et l'insérer dans le nouveau tableau s’il n’existe pas dans le tableau.

Intervieweur : Parlez-moi de la fonction flèche dans es6 ?

Moi : Euh~, d'accord, la fonction flèche est équivalente à une fonction anonyme, ce qui simplifie la définition de la fonction. Il existe deux manières d'écrire des fonctions fléchées. Lorsque le corps de la fonction est une seule instruction, {} et return peuvent être omis. L'autre doit contenir plusieurs instructions, et {} et return ne peuvent pas être omis. La plus grande caractéristique de la fonction flèche est qu'elle n'a pas cela, donc cela est obtenu de l'extérieur, c'est-à-dire qu'elle en hérite dans le contexte d'exécution externe. Puisqu'il n'y a pas de mot-clé this, la fonction flèche ne peut pas être utilisée comme un. constructeur.

Les fonctions fléchées sont plus concises, claires et rapides que la définition des fonctions ordinaires. Mais il y a une différence entre les deux : la fonction flèche n'a pas de prototype et de super, elle ne peut donc pas créer ceci. Elle est obtenue en héritant des variables dans l'environnement de la fonction externe, donc appeler, lier et appliquer ne peuvent pas changer le point. de its this ; en recherchant la fonction ordinaire la plus externe, its this pointe généralement vers window ; les fonctions fléchées ne peuvent pas utiliser new ; elles ne peuvent pas être utilisées comme fonctions génératrices et ne peuvent pas utiliser la commande rendement ; utilisé pour dynamiser this dans les champs d'objet et les fonctions de rappel, généralement utilisé en interne sans cette référence.

Intervieweur : Parlez-nous de la promotion des variables JS ?

Moi : Euh~, d'accord, la promotion des variables signifie que les déclarations de variables et de fonctions JS seront promues au début du code lors de la compilation du code . Le principe selon lequel la promotion de variable est établie est que la variable est déclarée à l'aide du mot-clé Var, et lorsque la variable est promue, seule la déclaration est promue, et l'affectation n'est pas promue. En même temps, la promotion de la fonction sera promue. ont priorité sur la promotion de la variable. Grâce à la promotion de la variable, la variable est accessible avant son initialisation et undéfini est renvoyé. La fonction peut être appelée avant qu'elle ne soit déclarée. Les variables déclarées à l'aide de let et const sont créées et promues, formant une zone morte temporaire. L'accès aux variables créées par let et const avant l'initialisation entraînera une erreur.

【Apprentissage recommandé :

Tutoriel avancé 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!