Eine ausführliche Erklärung hierzu, die Grundlagen von JavaScript

Das this

-Objekt der -Funktion in JavaScript ist der Bereich, in dem die Funktion ausgeführt wird (z. B. beim Aufruf der Funktion im globalen Bereich). der Webseite Wenn dieses Objekt auf verweist, bei dem es sich um ein Fenster handelt).

Dies unterscheidet sich in JavaScript stark von Java und anderen objektorientierten Sprachen. Die Funktionen bind(), call und apply() sind noch mehr Die Flexibilität geht hier noch weiter.

Um die Lesbarkeit zu gewährleisten, verwendet dieser Artikel eine freie Übersetzung anstelle einer wörtlichen Übersetzung. Darüber hinaus liegt das Urheberrecht dieses Artikels beim ursprünglichen Autor und die Übersetzung dient nur zum Lernen.

Wenn Sie das JavaScript-Schlüsselwort nicht so tiefgreifend verstehen, kann es sein, dass Sie manchmal in unerwartete Schwierigkeiten geraten. Hier haben wir 5 allgemeine Regeln zusammengefasst, die Ihnen helfen sollen, herauszufinden, worauf das eigentlich hinweist. Obwohl nicht alle Situationen abgedeckt sind, können anhand dieser Regeln die meisten Alltagssituationen korrekt abgeleitet werden.

Der Wert davon wird normalerweise durch die Ausführungsumgebung der Funktion bestimmt, was bedeutet, dass er davon abhängt, wie die Funktion aufgerufen wird.
Jedes Mal, wenn dieselbe Funktion aufgerufen wird, kann dies auf ein anderes Objekt verweisen ;

Global Object)

Öffnen Sie das Chrome-Browser-Entwicklerfenster (Windows: Strg + Sh ift + J) (Mac: Cmd + Option + J) und geben Sie Folgendes ein:

console.log(this);

, um zu sehen, was ausgegeben wird?

// Window {}

Fensterobjekt! Denn im globalen Bereich zeigt dies auf das globale Objekt. Das globale Objekt im Browser ist das Fensterobjekt.
Um Ihnen ein klareres Verständnis dafür zu geben, warum dies auf das Fensterobjekt verweist, schauen wir uns ein weiteres Beispiel an:

var myName = 'Brandon';

myName
// 输出 'Brandon'

Tatsächlich sind alle Variablen global definiert An das Fensterobjekt binden. Führen wir den folgenden Test durch:

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

Jetzt fügen wir dies in die Funktion ein und sehen, welchen Effekt es hat.

function test(){
 return this;
}
test();

Sie werden feststellen, dass dies immer noch auf das globale Fensterobjekt verweist. Da sich das Schlüsselwort this nicht in einem deklarierten Objekt befindet, wird standardmäßig das globale Fensterobjekt verwendet. Dies kann für die meisten Anfänger etwas schwierig zu verstehen sein. Nachdem Sie diesen Artikel gelesen haben, werden Sie es plötzlich verstehen.
Hinweis: Im Strcit-Modus ist dies im obigen Beispiel undefiniert.

Declared Object (Declared Object)

Wenn das Schlüsselwort this in einem deklarierten Objekt verwendet wird, ist sein Wert Binds zum nächsten übergeordneten Element der Funktion, die dies aufgerufen hat. Lassen Sie uns dieses Problem anhand eines Beispiels veranschaulichen:

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

Wenn dies in der Vollfunktion des deklarierten Objekts Person verwendet wird, dann ist das nächstgelegene übergeordnete Objekt der Vollfunktion, die dies aufruft, Person, also zeigt dies zur Person.

Um besser zu beschreiben, dass dies tatsächlich auf das Personenobjekt verweist, können Sie den folgenden Code in die Browserkonsole kopieren und ausdrucken.

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

Sehen wir uns ein komplexeres Beispiel an:

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

Hier haben wir verschachtelte Objekte. Auf wen weist das derzeit hin? Drucken wir es aus und schauen wir uns Folgendes an:

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

Sie werden feststellen, dass die zuvor beschriebenen Regeln erfüllt sind: Sein Wert wird an das nächste übergeordnete Objekt der Funktion gebunden, die dies aufruft.

neuesSchlüsselwort

Wenn Sie das neue Schlüsselwort zum Erstellen eines neuen Objekts verwenden, wird dieses an das neue Objekt gebunden. Schauen wir uns ein Beispiel an:

function Car(make, model) {
 this.make = make;
 this.model = model;
};

Basierend auf der ersten Regel können Sie daraus schließen, dass dies auf das globale Objekt verweist. Wenn wir jedoch das Schlüsselwort new verwenden, um eine neue Variable zu deklarieren, wird diese in der Car-Funktion an ein neues leeres Objekt gebunden und dann werden die Werte von this.make und this.model initialisiert.

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

Aufrufen, binden und anwenden

Wir können dies explizit im Bindungsobjekt call(), bind(), apply() festlegen. Diese drei Funktionen sind sehr ähnlich, wir müssen jedoch auf ihre subtilen Unterschiede achten.

cba7bc3e0f49b88d0f12843f17825db4

Sehen wir uns ein Beispiel an:

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

Die Add-Funktion gibt NaN aus, da this.a und this.b undefiniert sind.

Jetzt stellen wir das Objekt vor und verwenden call() und apply(), um Folgendes aufzurufen:

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

Wenn wir add.call() verwenden, ist der erste Parameter dieser, der sein muss gebundenes Objekt, und der Rest sind die ursprünglichen Parameter der Add-Funktion.
Daher zeigt this.a auf ten.a und this.b auf ten.b. add.apply() ist ähnlich, außer dass der zweite Parameter ein Array ist, das zum Speichern der Parameter der Funktion add verwendet wird.

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

执行:

small.go(2, 3, 4);
// 输出 10

如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

如果我们将bindTest在控制台下打印出来，我们会看到：

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

注意：该函数已经将this绑定到large对象，并且传入了第一个参数b。所以，我们接下来是需要传入余下的参数即可：

bindTest(3, 4);
// 输出 109

箭头函数(=>)

因为需要很大的篇幅，我们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。
接下来我们来总结一下：

this的值通常是由当前函数的执行环境所决定；
在全局作用域，this指向全局对象 (window对象)；
当使用new关键字声明，this指向新建对象；
我们可以使用call(), bind(), apply()来设置this；
箭头函数不会绑定this。

Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung hierzu, die Grundlagen von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!