Heim > Artikel > Web-Frontend > Sechs Hindernisse für JavaScript Dies
Angesichts der Art und Weise, wie diese Koketterie funktioniert, ist das Verständnis dafür ein zeitloses Thema, und dieser Artikel versucht, es auf den Punkt zu bringen, indem er es in sechs Teile zerlegt Bleib bei diesem nervigen Monster.
hier dreht sich alles um den Kontext.
Um es ganz klar auszudrücken bedeutet das, den Chef zu finden, das Objekt (Kontextobjekt) zu finden, das den aktuellen Kontext besitzt (Kontext).
Große Bosse können in sechs Level eingeteilt werden, desto größer ist die Macht. Dadurch wird nur der größte Boss erkannt.
Der Boss mit der geringsten Macht ist das Backup. Unter normalen Umständen ist es die globale Situation, und im Browser ist es das Fenster ; im Falle der Verwendung strict ist es undefiniert.
function showThis () { console.log(this) } function showStrictThis () { 'use strict' console.log(this) } showThis() // window showStrictThis() // undefined
Der Chef der zweiten Ebene bringt es auf den Punkt, den Punkt vor dieser Funktion zu finden.
Wenn die Funktion, die dies verwendet, zu einem Kontextobjekt gehört, dann ist dieses Kontextobjekt an dieses gebunden.
Im folgenden Beispiel ist „boss“ beispielsweise das Kontextobjekt von „returnThis“, oder „returnThis“ gehört zu „boss“.
var boss = { name: 'boss', returnThis () { return this } } boss.returnThis() === boss // true
Seien Sie im folgenden Beispiel vorsichtig. Können Sie die Antwort finden?
var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis () { return boss1.returnThis() } } var boss3 = { name: 'boss3', returnThis () { var returnThis = boss1.returnThis return returnThis() } } boss1.returnThis() // boss1 boss2.returnThis() // ? boss3.returnThis() // ?
Die Antwort lautet „boss1“ und „window“. Oh, hast du es richtig erraten?
Schauen Sie sich einfach die Funktion an, die dies verwendet.
In „boss2.returnThis“ ist die Funktion, die dies verwendet, „boss1.returnThis“, also ist „this“ an „boss1“ gebunden.
In „boss3.returnThis“ ist die Funktion, die dies verwendet, „returnThis“, also „this“. verpflichtet, einen Ersatzreifen zu bestellen.
Wie binde ich das an Boss2?
var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() //boss2
Ja, solange die Funktion, die dies verwendet, zu Boss2 gehört.
Die Chefs der dritten Ebene sind Object.prototype.call und Object.prototype.apply, die dies über Parameter spezifizieren können. (Beachten Sie, dass dies nicht direkt zugewiesen werden kann, this = 2 meldet einen ReferenceError.)
function returnThis () { return this } var boss1 = { name: 'boss1' } returnThis() // window returnThis.call(boss1) // boss1 returnThis.apply(boss1) // boss1
Der Boss der vierten Ebene ist Object.prototype.bind Er sorgt nicht nur durch eine neue Funktion für dauerhafte Bindung, sondern überschreibt auch die Befehle des Bosses der dritten Ebene.
function returnThis () { return this } var boss1 = { name: 'boss1'} var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // boss1 var boss2 = { name: 'boss2' } boss1returnThis.call(boss2) // still boss1
Ein Ort, der leichter zu ignorieren und zu binden ist, ist neu. Wenn wir eine neue Funktion erstellen, wird diese automatisch an das neue Objekt gebunden und dann wird die Funktion aufgerufen. Es überschreibt die Bindung von bind.
function showThis () { console.log(this) } showThis() // window new showThis() // showThis var boss1 = { name: 'boss1' } showThis.call(boss1) // boss1 new showThis.call(boss1) // TypeError var boss1showThis = showThis.bind(boss1) boss1showThis() // boss1 new boss1showThis() // showThis
Der letzte mächtige Boss ist die Pfeilfunktion von ES2015. Dies ist in Pfeilfunktionen nicht mehr glamourös, sondern dauerhaft im aktuellen lexikalischen Bereich, der als „Lexical This“ bezeichnet wird, versiegelt und kann vor der Ausführung des Codes bestimmt werden. Kein anderer großer Kerl kann das abdecken.
Der Vorteil davon ist, dass es bequem ist, den aktuellen Umfang dieser Rückruffunktion zu nutzen, ohne Angst vor Verwirrung zu haben.
Schauen Sie sich also bei Pfeilfunktionen einfach an, wo sie erstellt werden.
Wenn Sie sich für den von V8 implementierten lexikalischen Umfang interessieren, können Sie hier einen Blick darauf werfen.
function callback (cb) { cb() } callback(() => { console.log(this) }) // window var boss1 = { name: 'boss1', callback: callback, callback2 () { callback(() => { console.log(this) }) } } boss1.callback(() => { console.log(this) }) // still window boss1.callback2(() => { console.log(this) }) // boss1
Sie müssen auf die folgende seltsame Verwendung achten:
var returnThis = () => this returnThis() // window new returnThis() // TypeError var boss1 = { name: 'boss1', returnThis () { var func = () => this return func() } } returnThis.call(boss1) // still window var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // still window boss1.returnThis() // boss1 var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() // boss2
Wenn Sie nicht wissen, warum es am Ende Boss2 ist, lesen Sie weiter „Für Pfeilfunktionen“. , schauen Sie es sich einfach an Wo wurde der Satz erstellt?
Das Obige ist der Inhalt der sechs Hürden von JavaScript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!