Der Hinweis darauf in JS und die Funktionen von Call und Apply (Bild- und Text-Tutorial)

In bestimmten praktischen Anwendungen kann der Sinn dieses Problems nicht bei der Definition der Funktion bestimmt werden, sondern wird bei der Ausführung der Funktion bestimmt. Je nach Ausführungsumgebung kann er grob in die folgenden drei Typen unterteilt werden:

1. Wenn die Funktion als normale Funktion aufgerufen wird, zeigt dies auf das globale Objekt

2. Wenn die Funktion als Methode des Objekts aufgerufen wird, zeigt dies auf das Objekt

3. Wenn die Funktion als Konstruktor aufgerufen wird, zeigt dies auf das neu erstellte Objekt

Beispiel eins:

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

Beispiel zwei:

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

Beispiel drei:

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

Zum Beispiel drei gibt es noch einen anderen. Der Sonderfall ist, wenn der Konstruktor ein Objekt über „return“ zurückgibt. Das Endergebnis dieser Operation ist das zurückgegebene Objekt anstelle des neu erstellten Objekts. Dies ist also nicht der Fall in diesem Fall verwenden.

Beispiel 4:

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

Beispiel 5:

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

Die Rolle von call und apply

apply akzeptiert zwei Parameter, der erste Parameter gibt die Funktion The an Der zweite Parameter ist ein Array oder ein Array-ähnlicher Zeiger auf diesen Punkt im Körper, der zur Übergabe der Parameterliste der aufgerufenen Funktion verwendet wird.

Beispiel 1:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

Aufruf Die Anzahl der übergebenen Parameter ist nicht festgelegt. Der erste Parameter wird auch verwendet, um den Zeiger davon im Funktionskörper anzugeben der zweite Beginnend mit den Parametern wird jeder Parameter der Reihe nach an die aufgerufene Funktion übergeben.

Beispiel 2:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

Darüber hinaus implementieren die meisten fortgeschrittenen Browser auch die Bind-Methode. Der Unterschied zwischen Call und Apply besteht darin, dass Bind nur den Zeiger davon innerhalb der Funktion ändert, aber nicht sofort Zur Ausführung müssen Sie es explizit aufrufen.

Beispiel 3: Simulieren Sie die Bindungsmethode des Browsers

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

Dies ist verloren gegangen

In einigen Fällen geht der Zeiger darauf verloren. In diesem Fall müssen wir call verwenden , anwenden und binden, um das Zeigeproblem zu ändern.

Beispiel 1: Wenn die Methode „getName“ als Eigenschaft des Objekts „boy“ aufgerufen wird, zeigt dies auf das Objekt „boy“, wenn eine andere Variable auf die Methode „getName“ verweist, weil dies der Fall ist Wird als gewöhnliche Funktion aufgerufen. Dies zeigt also auf das globale Objektfenster

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

Beispiel 2: Auch wenn die Funktion innerhalb der Funktion definiert ist und als normales Objekt aufgerufen wird, zeigt dies auch auf das Fensterobjekt

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Schritte zur Ressourcenfreigabe zwischen NodeJS-Elternprozess und Kindprozess

JS anonymer Selbst- Ausführen des Funktionskonzepts und der Gebrauchsanweisung

JS-Analyse der Methode zum Generieren eines QR-Code-Bildes aus einem Link

Das obige ist der detaillierte Inhalt vonDer Hinweis darauf in JS und die Funktionen von Call und Apply (Bild- und Text-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!