So verwenden Sie Call und Apply in JS

Dieses Mal zeige ich Ihnen, wie Sie Call and Apply in JS verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Call and Apply in JS gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In bestimmten praktischen Anwendungen kann der Sinn dieser Funktion nicht bei der Definition bestimmt werden, sondern bei der Ausführung der Funktion. Je nach Ausführungsumgebung kann sie 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 verwendet 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

Beispiel drei gibt es einen weiteren Sonderfall, nämlich wenn der Konstruktor gibt ein Objekt über „return“ zurück, die Operation dieser Operation. Das Endergebnis ist dieses Objekt, kein neu erstelltes Objekt, daher ist dies in diesem Fall nutzlos.

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 Anrufen und Bewerben

apply akzeptiert zwei Parameter. Der erste Parameter gibt den Zeiger davon im Funktionskörper an. Der zweite Parameter ist ein Array oder Array-ähnliches, das zur Übergabe der aufgerufenen -Funktion verwendet wird. Liste der Parameter .

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

call Die Anzahl der übergebenen Parameter ist nicht festgelegt. Wie bei apply wird auch der erste Parameter verwendet, um dies in der Funktion anzugeben Beginnend mit dem zweiten Parameter wird jeder Parameter nacheinander 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 it und call and apply besteht darin, dass bind dies nur innerhalb von ändert Funktion zeigt darauf, wird aber nicht sofort ausgeführt, Sie müssen sie 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');

Das Fehlende dieses

ist drin In einigen Fällen geht die Ausrichtung hiervon verloren. Zu diesem Zeitpunkt müssen wir call, apply und bind verwenden, um die Ausrichtung hiervon zu ändern.

Beispiel 1: Wenn die Methode „getName“ als Eigenschaft des Objekts „boy“ aufgerufen wird, zeigt diese auf das Objekt „boy“, und wenn eine andere Variable auf das Objekt „“ verweist getName"-Methode, weil sie als gewöhnliche Funktion aufgerufen wird, also auf das globale Objektfenster zeigt

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, wenn sie als gewöhnliches Objekt aufgerufen wird , dies zeigt 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

Ich glaube, nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Vue-Element einen Musikplayer macht

Eine Zusammenfassung der Eltern-Kind-Komponentenkommunikation von VueJ Methoden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Call und Apply in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!