Relevante Einführung dazu: Anwenden, Aufrufen und Binden in JS

This, apply, call und bind in JS sind 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

Dies ist eine weitere klassische Interviewfrage~/(ㄒoㄒ)/~~Es ist auch eine der vielen Fallstricke In ES5 1 und in ES6 können dadurch verursachte Fehler weitgehend vermieden werden. Um jedoch einen alten Code beizubehalten, ist es am besten, den Unterschied zwischen dem Verweisen darauf und Aufrufen, Anwenden und Binden zu verstehen.

Der Zeiger von this

In ES5 folgt der Zeiger von this tatsächlich immer einem Prinzip: Dies zeigt immer auf das Objekt der es zuletzt aufgerufen hat, komm schon, lies es dreimal nach mir: Das zeigt immer auf das letzte Objekt, das es aufgerufen hat, das zeigt immer auf das letzte Objekt, das es aufgerufen hat, das zeigt immer auf das letzte Objekt, das es aufgerufen hat. Merken Sie sich diesen Satz, die Hälfte davon wissen Sie bereits.

Sehen 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

Ich glaube, jeder weiß, warum dieses Protokoll so ist WindowsName, denn gemäß dem Satz gerade „Dies zeigt immer auf das letzte Objekt, das es aufgerufen hat“, schauen wir uns die letzte Stelle an, an der a als a(); bezeichnet wird. Das zuvor nicht aufgerufene Objekt ist das globale Objektfenster. Dies entspricht 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();

In diesem Beispiel wird die Funktion fn vom Objekt a aufgerufen , der gedruckte Wert ist also der Wert von name in a. 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();

Hier der Grund für den Druck Cherry ist auch wegen des Satzes gerade „dies zeigt immer auf das Objekt, das es zuletzt aufgerufen hat“, und das letzte Objekt, das es aufgerufen hat, ist 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();

Warum steht hier undefiniert? 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 kniffligeres 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();

Vielleicht haben Sie hier Fragen, warum nicht? Dies liegt daran, dass die fn-Methode des Objekts a zwar der Variablen f zugewiesen ist, sie aber nicht aufgerufen wird. Lesen Sie dann diesen Satz nach mir: „Dies zeigt immer auf das Objekt, das es zuletzt aufgerufen hat“, weil f es einfach nicht aufgerufen hat. , also wird fn() am Ende immer noch von window 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.

Schauen 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()

Sie sollten verstehen können, warum dies der Fall ist nachdem ich das gelesen habe.

Wie man den Sinn dieser Sache ändert

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

Verwenden Sie die Pfeilfunktion von ES6

und verwenden Sie _this = this innerhalb der Funktion

Verwenden Sie apply, call, bind

new zum Instanziieren ein Objekt

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

meldet einen Fehler, ohne die Pfeilfunktion zu verwenden, da das letzte Objekt, das setTimeout aufruft, window ist, aber Es gibt keine Funktion func1 im Fenster.

Wir werden dieses Beispiel in diesem Abschnitt zur Änderung dieses Zeigers als Demo umwandeln.

Pfeilfunktionen

Wie wir alle wissen, können ES6-Pfeilfunktionen 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

Verwenden Sie _this = this innerhalb der Funktion

Wenn Sie ES6 nicht verwenden, dann dies Dies sollte der einfachste fehlerfreie Weg sein. Wir speichern zunächst das Objekt, das diese Funktion aufruft, in der Variablen _this und verwenden dann dieses _this in der Funktion, 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

这个例子中，在 func2 中，首先设置 var _this = this;，这里的 this 是调用 func2 的对象 a，为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this(指向变量 a) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 a 了。

使用 apply、call、bind

使用 apply、call、bind 函数也是可以改变 this 的指向的，原理稍后再讲，我们先来看一下是怎么实现的：

使用 apply

例 10：

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

使用 call

例 11：

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

使用 bind

例 12：

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

apply、call、bind 区别

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

在 MDN 中定义 apply 如下；

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

语法：

fun.apply(thisArg, [argsArray])

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[, ...]]])

所以 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

例 14：

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

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)

我们会发现并没有输出，这是为什么呢，我们来看一下 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

Das obige ist der detaillierte Inhalt vonRelevante Einführung dazu: Anwenden, Aufrufen und Binden in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!