Teilen Sie Beispiele hierfür: Anwenden, Aufrufen und Binden in JS-js-Tutorial-php.cn

Dies weist darauf hin

In ES5 folgt der Punkt tatsächlich immer einem Prinzip: Dies zeigt immer auf das Objekt, das es zuletzt dreimal nach mir aufgerufen hat: dieses zeigt immer auf das letzte Objekt, das es aufgerufen hat. Dieses Objekt zeigt immer auf das letzte Objekt, das es aufgerufen hat. Dies zeigt immer auf das letzte Objekt, das es aufgerufen hat. Merken Sie sich diesen Satz, die Hälfte davon wissen Sie bereits.

Dies ist eine weitere klassische Interviewfrage. Dies ist eine klassische Interviewfrage. Es ist am besten, den Unterschied zwischen der Richtung von „This“ und „Call“, „Apply“ und „Bind“ zu verstehen. Folgen wir dem Herausgeber von Script House, um das Wissen darüber zu erlernen, anzuwenden, anzurufen und zu binden.

Schauen wir uns das einfachste Beispiel an:

Beispiel 1:

 var name = "windowsName";
 function a() {
  var name = "Cherry";
  console.log(this.name);   // windowsName
  console.log("inner:" + this); // inner: Window
 }
 a();
 console.log("outer:" + this)   // outer: Window

Nach dem Login kopieren

Ich glaube, jeder weiß, warum das Protokoll WindowsName ist, denn gemäß dem oben Gesagten Wenn wir sagen: „Dies zeigt immer auf das letzte Objekt, das es aufgerufen hat“, schauen wir uns die letzte Stelle an, an der a aufgerufen wurde (); das Objekt, das zuvor nicht aufgerufen wurde, ist das globale Objektfenster, das äquivalent zu window.a( ); beachten Sie, dass wir hier nicht den strikten Modus verwenden. Wenn der strikte Modus verwendet wird, ist das globale Objekt undefiniert und der Fehler Uncaught TypeError: Cannot read property 'name' of undefiniert wird gemeldet.

Sehen Sie sich dieses Beispiel noch einmal an:

Beispiel 2:

var name = "windowsName";
 var a = {
  name: "Cherry",
  fn : function () {
   console.log(this.name);  // Cherry
  }
 }
 a.fn();

Nach dem Login kopieren

In diesem Beispiel wird die Funktion fn von Objekt a aufgerufen, sodass der gedruckte Wert in einem The liegt Wert des Namens. Ist es etwas klarer?

Machen wir eine kleine Änderung:

Beispiel 3:

var name = "windowsName";
 var a = {
  name: "Cherry",
  fn : function () {
   console.log(this.name);  // Cherry
  }
 }
 window.a.fn();

Nach dem Login kopieren

Der Grund, warum Cherry hier gedruckt wird, liegt auch am Satz just Wie das Sprichwort sagt: „Dies zeigt immer auf das Objekt, das es zuletzt aufgerufen hat“, ist das letzte Objekt, das es aufgerufen hat, immer noch Objekt a.

Schauen wir uns noch einmal dieses Beispiel an:

Beispiel 4:

 var name = "windowsName";
 var a = {
  // name: "Cherry",
  fn : function () {
   console.log(this.name);  // undefined
  }
 }
 window.a.fn();

Nach dem Login kopieren

Warum wird hier undefiniert gedruckt? Dies liegt daran, dass fn, wie gerade beschrieben, von Objekt a aufgerufen wird, was bedeutet, dass das interne This von fn Objekt a ist und der Name nicht in Objekt a definiert ist, sodass der Wert von this.name im Protokoll undefiniert ist.

Dieses Beispiel veranschaulicht immer noch: Dies zeigt immer auf das Objekt, das es zuletzt aufgerufen hat, da das Objekt, das zuletzt fn aufgerufen hat, a war. Selbst wenn in a kein Namensattribut vorhanden ist, wird nicht weiter gesucht Dies vom vorherigen Objekt, aber direkt undefiniert ausgeben.

Sehen wir uns ein schwierigeres Beispiel an:

Beispiel 5:

 var name = "windowsName";
 var a = {
  name : null,
  // name: "Cherry",
  fn : function () {
   console.log(this.name);  // windowsName
  }
 }
 var f = a.fn;
 f();

Nach dem Login kopieren

Sie haben hier vielleicht Fragen, warum ist es nicht Cherry? Das liegt daran, dass es sich zwar um ein Objekt handelt Die fn-Methode ist der Variablen f zugewiesen, wird aber nicht aufgerufen. Lesen Sie dann diesen Satz vor: „Dies zeigt immer auf das Objekt, das es zuletzt aufgerufen hat.“ Da fn gerade nicht aufgerufen wurde, wird fn() immer noch aufgerufen am Ende aufgerufen. Das deutet also auf das Fenster hin.

Aus den obigen fünf Beispielen können wir ersehen, dass der Sinn davon beim Erstellen nicht bestimmt werden kann. In es5 zeigt dies immer auf das Objekt, das es zuletzt aufgerufen hat.

Sehen wir uns ein weiteres Beispiel an:

Beispiel 6:

 var name = "windowsName";
 function fn() {
  var name = 'Cherry';
  innerFunction();
  function innerFunction() {
   console.log(this.name);  // windowsName
  }
 }
 fn()

Nach dem Login kopieren

Nachdem Sie es jetzt gelesen haben, sollten Sie verstehen können, warum dies geschieht (oﾟ▽ﾟ) O.

So ändern Sie den Sinn dieser Sache

Ich habe die folgenden Methoden zusammengefasst, um den Sinn dieser Sache zu ändern:

Verwenden Sie die ES6-Pfeilfunktion

Verwenden Sie sie innerhalb der Funktion _this = this

Verwenden Sie apply, call, bind

new, um ein Objekt zu instanziieren

Beispiel 7:

var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   },100);
  }
 };
 a.func2()  // this.func1 is not a function

Nach dem Login kopieren

ohne Pfeil zu verwenden Funktionen In diesem Fall wird ein Fehler gemeldet, da das letzte Objekt, das setTimeout aufruft, window ist, in window jedoch keine Funktion func1 vorhanden ist.

Wir werden dieses Beispiel als Demo in diesem Abschnitt zum Ändern dieses Zeigers umwandeln.

Pfeilfunktion

Wie wir alle wissen, kann die Pfeilfunktion von ES6 die Fallstricke vermeiden, die bei der Verwendung in ES5 auftreten. Das This einer Pfeilfunktion zeigt immer darauf, wenn die Funktion definiert wird, nicht wenn sie ausgeführt wird. , muss sich die Pfeilfunktion diesen Satz merken: „In der Pfeilfunktion gibt es diese Bindung nicht, und ihr Wert muss durch Nachschlagen in der Bereichskette bestimmt werden. Wenn die Pfeilfunktion in einer Nicht-Pfeilfunktion enthalten ist, ist diese Bindung vorhanden.“ Die nächste Nicht-Pfeilfunktion ist this, andernfalls ist this undefiniert.

Beispiel 8:

 var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   setTimeout( () => {
    this.func1()
   },100);
  }
 };
 a.func2()  // Cherry

Nach dem Login kopieren

Verwenden Sie _this = this innerhalb der Funktion

Wenn Sie ES6 nicht verwenden, sollte diese Methode die einfachste und fehlerfreieste sein Der Weg ist, dass wir zuerst das Objekt, das diese Funktion aufruft, in der Variablen _this speichern und dann dieses _this in der Funktion verwenden, damit sich _this nicht ändert.

Beispiel 9:

 var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   var _this = this;
   setTimeout( function() {
    _this.func1()
   },100);
  }
 };
 a.func2()  // Cherry

Nach dem Login kopieren

In diesem Beispiel wird in func2 zunächst var _this = this; gesetzt, wobei dies das Objekt a ist, das func2 aufruft, um zu verhindern, dass SetTimeout aufgerufen wird nach Fenster, was dazu führt, dass dies in setTimeout Fenster ist. Wir weisen dies (das auf die Variable a zeigt) einer Variablen _this zu, so dass, wenn wir _this in func2 verwenden, es auf das Objekt a zeigt.

Verwenden Sie Apply, Call und Bind

Die Verwendung der Apply-, Call- und Bind-Funktionen kann die Richtung auch ändern. Das Prinzip wird später besprochen es ist implementiert:

Anwenden verwenden

Beispiel 10:

 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.apply(a),100);
  }
 };
 a.func2()   // Cherry

Nach dem Login kopieren

Aufruf verwenden

Beispiel 11:

 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.call(a),100);
  }
 };
 a.func2()   // Cherry

Nach dem Login kopieren

Verwenden Sie bind

Beispiel 12:

var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.bind(a)(),100);
  }
 };
 a.func2()   // Cherry

Nach dem Login kopieren

Unterschiede zwischen apply, call und bind

刚刚我们已经介绍了 apply、call、bind 都是可以改变 this 的指向的，但是这三个函数稍有不同。

在 MDN 中定义 apply 如下；

apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数

语法：

fun.apply(thisArg, [argsArray])

Nach dem Login kopieren

thisArg：在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。

argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

apply 和 call 的区别

其实 apply 和 call 基本类似，他们的区别只是传入的参数不同。

call 的语法为：

fun.call(thisArg[, arg1[, arg2[, ...]]])

Nach dem Login kopieren

所以 apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

例 13：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.apply(a,[1,2])  // 3

Nach dem Login kopieren

例 14：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.call(a,1,2)  // 3

Nach dem Login kopieren

bind 和 apply、call 区别

我们先来将刚刚的例子使用 bind 试一下

 var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)

Nach dem Login kopieren

我们会发现并没有输出，这是为什么呢，我们来看一下 MDN 上的文档说明：

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

所以我们可以看出，bind 是创建一个新的函数，我们必须要手动去调用：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)()   // 3

Nach dem Login kopieren