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.

Zuallererst

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.

Die erste Ebene: das Ende der Welt

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

Zweite Ebene: Stein in Gold verwandeln

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.

Dritte Ebene: Fingerspitzen für die Ehe

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

Vierte Ebene: Gegeneinander

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

Fünfte Ebene: Da ist etwas drinnen

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

Level 6: Berge militärischer Befehle

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