10 Fragen pro Tag. Nach 100 Tagen beherrschen Sie alle hochfrequenten Wissenspunkte von Front-End-Interviews. ! ! Ich hoffe, dass Sie beim Lesen des Artikels nicht direkt auf die Antworten schauen, sondern zunächst darüber nachdenken, ob Sie es wissen, und wenn ja, wie lautet Ihre Antwort? Denken Sie darüber nach und vergleichen Sie sie dann mit der Antwort. Wenn Sie eine bessere Antwort als meine haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich und diskutieren Sie gemeinsam über die Schönheit der Technologie.
Ich: Äh~, wir wissen, dass es darin eine Regel gibt, nach der jeder, der es aufruft, auf wen zeigt, dieser Satz wird subtil zu ihm führen Wir haben einige Missverständnisse. Nun fassen wir die möglichen Fehler wie folgt zusammen und stellen den Code bereit:
1) Wir müssen wissen, dass, wenn wir dies in der globalen Situation bekommen, dies auf Windows verweist, weil wir es im globalen verwenden Situation. Alles wird am Fenster montiert.
<script>
console.log(this) // 指向window
function a(){
console.log(this)
}
a() // 相当于 window.a()，指向的依旧是 window
</script>2) Ich muss wissen, dass der Punkt hierauf auf den vorherigen Aufrufer verweist. Der Code lautet wie folgt:
Nachdem wir den Code gelesen haben, wissen wir, dass die d-Funktion zwar im Wesentlichen aufgrund von a aufgerufen wird, dies jedoch der Fall ist In der Mitte wird immer noch eine Schicht c aufgerufen. Dies zeigt also auf die obere Ebene und es gibt ein Näherungsprinzip. Das ist sehr wichtig! ! !
<script>
var a = {
b:10,
c:{
b:12,
d:function(){
console.log(this)
}
}
}
a.c.d() // {b: 12, d: ƒ}
</script>3) Wir müssen wissen, dass die Pfeilfunktion keinen eigenen Umfang hat, was bedeutet, dass sie immer auf die obere Ebene verweist. Dies ist eine Interviewfrage von einer großen Fabrik Erraten Sie, was das endgültige gedruckte Ergebnis ist?
Vorausgesetzt, dass Sie diese Interviewfrage sorgfältig gelesen haben, wissen Sie meiner Meinung nach bereits, dass die Antwort 66 ist. Warum? Sie müssen wissen, dass die Pfeilfunktion kein eigenes This hat. Daher muss sie zur oberen Ebene gehen, um dies zu finden. Die obere Ebene befindet sich im globalen Bereich. Daher wird die global bereitgestellte ID-Nummer 66 gedruckt.
<script>
var id = 66
function a(){
setTimeout(()=>{
console.log(this.id)
},500)
}
a({id:22}) // 猜猜结果是什么？
</script>Wie können wir dann
die Richtung ändern und dies steuern, um das gewünschte Ergebnis zu erreichen? Die folgenden drei Methoden werden angegeben: <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>
Interviewer: Bitte sprechen Sie über Ihr Verständnis der Ereignisdelegierungcall apply bind three-Methoden
können alle verwendet werden, um diesen Zeiger der Funktion zu ändern, die spezifischen Unterschiede sind wie folgt: 1) fn.call (newThis, params) Der erste Parameter der Aufruffunktion ist der neue Zeiger davon, und dann werden die von der Funktion fn zu verwendenden Parameter nacheinander übergeben. Die fn-Funktion wird sofort ausgeführt.
2) fn.apply (newThis,paramsArr) Der erste Parameter der Apply-Funktion ist der neue Zeiger davon, und der zweite Parameter ist das von fn zu verwendende Parameterarray, und die fn-Funktion wird sofort ausgeführt.
3) fn.bind (newThis,params) Der erste Parameter der Bind-Funktion ist der neue Zeiger davon. Die nachfolgenden Parameter können direkt oder in Form eines Arrays übergeben werden. Die Fn-Funktion wird nicht sofort ausgeführt und die Ausrichtung der Fn-Funktion kann nur einmal geändert werden. Nachfolgende Änderungen mit Bind sind ungültig. Was zurückgegeben wird, ist die neue Fn, die den Sinn davon geändert hat
<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>Nach dem Login kopieren
Ich: Okay, Promise ist ein von ES6 bereitgestellter Konstruktor. Sie können den Promise-Konstruktor neu verwenden, um eine Funktion als Parameter zu erstellen. Die Funktionen resolve und reject, resolve ändern den Zustand von Promise von Warten auf Erfolg und übergeben das Ergebnis der asynchronen Operation als Parameter; reject ändert den Zustand von Warten auf Erfolgsfehler. Wird aufgerufen, wenn ein asynchroner Vorgang fehlschlägt und der vom asynchronen Vorgang gemeldete Fehler als Parameter übergeben wird. Nachdem die Instanz erstellt wurde, können Sie die Methode then verwenden, um Erfolgs- bzw. Fehlerrückruffunktionen anzugeben, oder Sie können catch verwenden, um Fehler zu erfassen, then und catch letztendlich Geben Sie ein Promise zurück, damit es in einer Kette aufgerufen werden kann.
Die Rolle von Promise:
Promise ist eine asynchrone Mikroaufgabe, die das Problem asynchroner mehrschichtiger verschachtelter Rückrufe löst und den Code lesbarer und einfacher zu pflegen macht. Promise-Nutzung
Funktionen von Versprechen :
1) Der Zustand des Objekts wird von der Außenwelt nicht beeinflusst
2) Sobald sich der Zustand ändert, ändert er sich nicht mehr und das Ergebnis kann jederzeit abgerufen werden
3) Die Parameter Die Parameter der Resolve-Methode sind die Parameter der Callback-Funktion in Then, die Parameter in der Reject-Methode sind die Parameter in Catch
4) Solange die Then-Methode und die Catch-Methode keinen Fehler melden, geben sie a zurück vollständig erfülltes Versprechen
Anwendungsszenario:
Lösen Sie das verdammte Rückrufproblem
Spezifische Verwendungsmethoden finden Sie in meinem vorherigen Artikel: Versprechen in JS in einem Artikel verstehen
Interviewer: Wie viele Methoden verfügt JavaScript, um den Typ einer Variablen zu bestimmen?Ich: Äh, okay, die Zusammenfassung lautet wie folgt:
Was ist domänenübergreifend:
Die von einer Schnittstelle auf der aktuellen Seite angeforderte Adresse und die Adresse der aktuellen Seite, wenn Protokoll, Domänenname und Port. Es gibt einen Unterschied: Die Schnittstelle ist domänenübergreifend.
Gründe für domänenübergreifende Einschränkungen:Um die Sicherheit von Webseiten zu gewährleisten, verfügt der Browser über eine Same-Origin-Protokollrichtlinie.
Domänenübergreifende Lösung:
cors:
Die derzeit am häufigsten verwendete Lösung besteht darin, eine domänenübergreifende Implementierung durch die Einrichtung des Backends zu ermöglichen.
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");Knoten-Middleware, Nginx-Reverse-Proxy: Der Browser kann nicht domänenübergreifend auf den Server zugreifen, wenn domänenübergreifende Einschränkungen bestehen. Sowohl Knoten-Middleware als auch Nginx-Reverse-Proxy ermöglichen das Senden von Anforderungen an Proxy-Server, statische Seiten und Proxy-Server ist vom gleichen Ursprung, und dann sendet der Proxyserver eine Anfrage an den Back-End-Server. Es gibt keine Homologiebeschränkung zwischen dem Server und dem Server.
JSONP: Das von verwendete Prinzip besteht darin, dass Skript-Tags Ressourcen über Domänen hinweg anfordern können und die Rückruffunktion als Parameter in die URL eingebunden wird. Das Backend empfängt die Anfrage, ruft die Rückruffunktion auf und gibt die Daten als Parameter zurück. Achten Sie darauf, den Antwortheader so festzulegen, dass er den Dokumenttyp zurückgibt, der auf Javascript gesetzt sein sollte.
typeof: wird häufig zur Bestimmung grundlegender Datentypen verwendet Zusätzlich zur Funktion gibt die Funktion „Funktion“ zurück und alle anderen geben „Objekt“ zurück.
instanceof: wird hauptsächlich zur Unterscheidung von Referenzdatentypen verwendet. Die Erkennungsmethode besteht darin, dass sich der erkannte Typ in der Prototypenkette der aktuellen Instanz befindet und die von ihm erkannten Ergebnisse alle wahr sind
Object.prototype.toString.call()(Beurteilungsmethode der Objektprototypkette):
Anwendbar auf alle Arten der Beurteilungserkennung, die Erkennungsmethode ist Object.prototype.toString.call(data) und gibt die Daten zurück Geben Sie Zeichenfolge ein.
Konstruktor (für Referenzdatentypen):
wird zum Erkennen von Referenzdatentypen verwendet. Die Erkennungsmethode besteht darin, den Konstruktor der Instanz abzurufen, um festzustellen, ob sie mit einer bestimmten Klasse identisch ist Das Gleiche bedeutet, dass die Daten diesem Datentyp entsprechen. Diese Methode fügt der Prototypenkette keine weiteren Klassen hinzu und vermeidet so Störungen durch die Prototypenkette.
Ich: Äh, okay, alle asynchronen Aufgaben werden aus der Aufgabenwarteschlange entfernt und nacheinander ausgeführt, nachdem die Ausführung der synchronen Aufgabe abgeschlossen ist. Gängige Methoden zum Erreichen einer asynchronen Implementierung sind wie folgt:
Callback-Funktion, Event-Listening, setTimeout (Timer), Promise, async/await, Generatorgenerator
Interviewer: Erzählen Sie mir etwas über die Pfeilfunktion in es6?Ich: Äh, es gibt viele Möglichkeiten, Duplikate aus Arrays zu entfernen. Hier sind einige Beispiele und einfache Erklärungen:
Verwenden Sie den Objektattributschlüssel, um Duplikate auszuschließen: Traverse the Array, jedes Mal Bestimmen Sie, ob das Attribut im Objekt vorhanden ist. Wenn es nicht vorhanden ist, speichern Sie es in einem neuen Array, verwenden Sie das Array-Element als Schlüssel, legen Sie einen Wert fest, speichern Sie ihn im Objekt und geben Sie schließlich das neue Array zurück .
Verwenden Sie Set-Typ-Daten, um keine Duplikate zu haben: Neues Set, der Parameter ist ein Array, das dedupliziert werden muss. Set löscht automatisch doppelte Elemente, konvertiert das Set dann in ein Array und gibt es zurück .
Filter+Index der Deduplizierung: Verwenden Sie die Array-eigene Filtermethode, um arr.indexOf(num) gleich der Indexnummer zurückzugeben.
reduce +beinhaltet Deduplizierung: Verwenden Sie Reduzieren, um nach der Deduplizierung ein leeres Array zu durchlaufen und als neues Array zu übergeben, und ermitteln Sie dann intern, ob das aktuell durchlaufene Element im neuen Array vorhanden ist, und fügen Sie es in das ein neues Array, wenn es nicht im Array vorhanden ist.
Interviewer: Erzählen Sie uns etwas über die JS-Variablenförderung?Pfeilfunktionen sind prägnanter, klarer und schneller als die Definition gewöhnlicher Funktionen. Es gibt jedoch einen Unterschied zwischen den beiden: Die Pfeilfunktion verfügt nicht über Prototyp und Super, daher kann sie dies nicht erstellen. Dies wird durch die Vererbung der Variablen in der externen Funktionsumgebung erhalten, sodass Aufruf, Bindung und Anwendung den Punkt nicht ändern können Bei der Suche nach der äußersten gewöhnlichen Funktion können Pfeilfunktionen im Allgemeinen keine Argumente verwenden und können nicht als Generatorfunktionen verwendet werden Wird für die dynamische Verwendung in Objektfeldern und Rückruffunktionen verwendet und wird im Allgemeinen intern ohne diesen Verweis verwendet.
während der Codekompilierung an den Anfang des Codes heraufgestuft werden. Die Voraussetzung für die Variablenheraufstufung besteht darin, dass die Variable mit dem Schlüsselwort Var deklariert wird. Wenn die Variable heraufgestuft wird, wird nur die Deklaration heraufgestuft und die Zuweisung wird nicht heraufgestuft. Gleichzeitig hat die Deklarationsheraufstufung der Funktion Vorrang über die Förderung der Variablen. Durch die Variablenheraufstufung kann auf die Variable zugegriffen werden, bevor die Variable initialisiert wird und undefiniert zurückgegeben wird. Die Funktion kann aufgerufen werden, bevor die Funktion deklariert wird. Mit let und const deklarierte Variablen werden erstellt und hochgestuft und bilden eine vorübergehende tote Zone. Der Zugriff auf Variablen, die vor der Initialisierung mit let und const erstellt wurden, führt zu einem Fehler.
【Empfohlenes Lernen:Javascript-Tutorial für Fortgeschrittene
】
Das obige ist der detaillierte Inhalt vonWerfen Sie einen Blick auf diese Front-End-Interviewfragen, die Ihnen dabei helfen, hochfrequente Wissenspunkte zu meistern (7).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
