Was ist das in Javascript? 4 Bindungsmethoden davon (Einführung)

In diesem Kapitel erfahren Sie, was das in Javascript ist. 4 Bindungsmethoden davon (Einführung). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist das?

Wenn eine Funktion aufgerufen wird, wird ein Aktivitätsdatensatz (manchmal auch Ausführungskontext genannt) erstellt. Dieser Datensatz enthält Informationen wie den Ort, an dem die Funktion aufgerufen wurde (Aufrufliste), die aufrufende Methode der Funktion und die übergebenen Parameter. Dies ist eines der aufgezeichneten Attribute, die während der Funktionsausführung verwendet werden.

4 Möglichkeiten, dies zu binden

Standardbindung

function foo() { 
    console.log( this.a );
}
var a = 2;
foo(); // 2

Dieser Code gibt 2 aus und zeigt an dass dies standardmäßig an das globale Objekt gebunden ist

Implizite Bindung

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
obj.foo(); // 2

Dieser Code bindet dies an das obj-Objekt, wenn die Funktion auf ein Kontextobjekt (Kontext) verweist. , bindet die implizite Bindungsregel dies an dieses Kontextobjekt.

Implizites Verlustproblem

// 例子1111
function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
var bar = obj.foo; // 函数别名！

var a = "oops, global"; // a是全局对象的属性”

bar();  // "oops, global"
／／2222
function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};

var a = "oops, global"; // a是全局对象的属性

setTimeout( obj.foo, 100 ); // "oops, global

Beispiel 1111 Obwohl bar ein Verweis auf obj.foo ist, bezieht er sich tatsächlich auf die foo-Funktion selbst, also zu diesem Zeitpunkt The bar() ist eigentlich ein Funktionsaufruf ohne Änderungen, daher wird die Standardbindung angewendet. Beispiel 222 verliert diese Bindung in der setTimeout-Funktion. Das Prinzip ist das gleiche. Wir können die Parameterübergabe als implizite Zuweisung betrachten.

Explizite Bindung

Bei der Analyse der impliziten Bindung müssen wir ein Attribut einschließen, das auf die Funktion in einem Objekt zeigt, und indirekt auf die Funktion verweisen über dieses Attribut, wodurch dies indirekt (implizit) an dieses Objekt gebunden wird.

Was sollen wir also tun, wenn wir keine Funktionsreferenz in das Objekt einfügen, sondern einen Funktionsaufruf für ein Objekt erzwingen möchten?

Wer sich mit js beschäftigt hat, ist wahrscheinlich mit Call, Apply und Bind vertraut. Diese von js bereitgestellten nativen Methoden bieten uns eine Möglichkeit, dies explizit zu binden.

function foo() { 
    console.log( this.a );
}var obj = { 
    a:2};

foo.call( obj ); // 2

Durch foo.call(..) können wir erzwingen, dass foo's this beim Aufruf an obj gebunden wird.

Wenn Sie einen primitiven Wert (String-Typ, boolescher Typ oder numerischer Typ) als Bindungsobjekt übergeben, wird der primitive Wert in seine Objektform konvertiert (d. h. neue Zeichenfolge (..)) , neuer Boolescher Wert(..) oder neue Zahl(..)). Dies wird oft als „Boxen“ bezeichnet.

„Aus der Perspektive dieser Bindung sind call(..) und apply(..) gleich. Ihre Unterschiede spiegeln sich in anderen Parametern wider, aber wir müssen diese jetzt nicht berücksichtigen.“

Hard-Binding-Bind-Implementierung

Wir kennen bereits die 4 Möglichkeiten dieser Bindung, aber mit Call und Apply können wir das Problem des impliziten Verlusts immer noch nicht lösen. Beachten Sie Folgendes Beispiel:

function foo() { 
    console.log( this.a );
}

var obj = { 
    a:2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

bar.call(windows) //无法再修改this

Durch den Aufruf geben wir foo's this in der Funktionsleiste an. Unabhängig davon, wie bar anschließend aufgerufen wird, wird foo immer manuell für obj aufgerufen. Diese Bindung ist eine Anzeige-Zwangsbindung, daher der Name hard Bindung. Dies ist der Ursprung der Bindung (da die Bindungsmethode häufig verwendet wird und die Bindungsmethode in es5 neu ist, wird der obige Code nun zur

...略var bar = foo.bind(obj)
bar(); // 2setTimeout( bar, 100 ); // 2

Bindungsregelpriorität und zur neuen Funktion von). this in es6

Wenn Sie die This-Bindung einer laufenden Funktion ermitteln möchten, müssen Sie den direkten Aufrufort der Funktion ermitteln. Sobald es gefunden wurde, können die folgenden vier Regeln nacheinander angewendet werden, um das Bindungsobjekt davon zu bestimmen.

1. heißt von new? An das neu erstellte Objekt binden.

2. wird per Call oder Apply (oder Bind) aufgerufen? Bindet an das angegebene Objekt.

3. wird vom Kontextobjekt aufgerufen? An dieses Kontextobjekt binden.

4. Standard: Im strikten Modus an undefiniert binden, andernfalls an das globale Objekt gebunden.

Ein paar kleine Beispiele, um das zu verstehen

unction showThis () {  console.log(this)
}function showStrictThis () {  'use strict'
  console.log(this)
}
showThis() // windowshowStrictThis() // undefined

Dieses Objekt mit der kleinsten Priorität ist standardmäßig gebunden.

Denken Sie an das folgende Beispiel:

var person = {  name: '11',
  showThis () {    return this
  }
}

person.showThis() === person  //truevar person2 = { name: '22',
  showThis () {    return person.showThis()
  }
}var person3 = { name: '33',
  showThis () {    var retrunThis = person.showThis    return retrunThis()
  }
}

person.showThis()  //personperson2.showThis()  //?person3.showThis()  //?

Wir müssen zuerst den aufrufenden Ort finden. In 2 gibt es den Satz return person.showThis(), der implizit ein Personenobjekt bindet person ist Ausgabe, 3 ist return retrunThis(), dies ist standardmäßig an das Global gebunden und gibt Fenster zurück.

function showThis () {  
return this
}
var person = { name: 'person' }
showThis() // window
showThis.call(p1) // person
showThis.apply(p1) // person

gibt das Kontextobjekt durch explizite Bindung an.

function showThis () {
  return this
}
var person = { name: 'person' }

var personBind = showThis.bind(person)

personBind()   //person

var person2 = { name: 'person2' }

personBind.call(person2) //person

Die Bindungsmethode bindet dies stark, und dies kann nicht mehr durch explizite Bindung umgeschaltet werden.

function showThis () {
  return this
}
var person = { name: 'person' }
var person2 = { name: 'person2' }

var personBind = showThis.bind(person)

personBind()    //person
new personBind()  //showThis

new hat eine höhere Priorität als bind, daher kann dies überschrieben werden.

function foo() { 
    setTimeout(() => {        
        // 这里的this在词法上继承自foo()
        console.log( this.a ); 
    },100);
}var obj = { 
    a:2};

foo.call( obj ); // 2

Pfeilfunktionen werden nicht mit dem Funktionsschlüsselwort definiert, sondern mit dem Operator =>, der als „fetter Pfeil“ bekannt ist. Pfeilfunktionen verwenden nicht die vier Standardregeln hierfür, sondern bestimmen dies anhand des äußeren (Funktions- oder globalen) Geltungsbereichs. Pfeilfunktionsbindungen können nicht geändert werden, auch keine neuen. Im Internet gibt es viele ausführliche und umfassende Erklärungen zu Pfeilfunktionen. Hier keine weiteren Details.

Das obige ist der detaillierte Inhalt vonWas ist das in Javascript? 4 Bindungsmethoden davon (Einführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!