Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung von Anwendungsbeispielen zum Unterschied zwischen „Apply' und „Call', „Call' und „Bind' in JavaScript

Ausführliche Erläuterung von Anwendungsbeispielen zum Unterschied zwischen „Apply' und „Call', „Call' und „Bind' in JavaScript

伊谢尔伦
Freigeben: 2017-07-20 10:02:55
Original
1177 Leute haben es durchsucht

Der Unterschied zwischen apply und call

Die ECMAScript-Spezifikation definiert zwei Methoden, call und apply, für alle Funktionen. Sie werden häufig verwendet und ihre Funktionen sind bis auf genau gleich Übergabe von Parametern. Die Form ist einfach anders.

apply( )

Die apply-Methode übergibt zwei Parameter: Einer ist das Objekt als Funktionskontext und der andere ist die Funktion Parameter. Array bestehend aus.


var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B
Nach dem Login kopieren

Wie Sie sehen können, ist obj das Objekt, das als Funktionskontext verwendet wird, und dies zeigt in der Funktion func auf das Objekt obj. Die Parameter A und B werden im Array platziert und an die Funktion func übergeben, entsprechend den Listenelementen des Parameters func.

call( )

Der erste Parameter der Call-Methode ist auch das Objekt des Funktionskontexts, aber was später übergeben wird, ist es auch eine Parameterliste statt eines einzelnen Arrays.


var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D
Nach dem Login kopieren

Beim Vergleich von apply können wir den Unterschied erkennen, dass C und D als separate Parameter an die Funktion func übergeben werden, anstatt in einem Array platziert zu werden.

Sie müssen sich keine Gedanken darüber machen, wann Sie welche Methode anwenden. Wenn Ihre Parameter bereits in einem Array vorhanden sind, verwenden Sie natürlich apply. Wenn die Parameter verstreut sind und keine Korrelation zueinander aufweisen, verwenden Sie call.

Verwendung von apply und call

1. Ändern Sie dies, um auf

<🎜 zu verweisen >

var obj = {
 name: &#39;linxin&#39;
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin
Nach dem Login kopieren
Wir wissen, dass der erste Parameter der Aufrufmethode das Objekt als Funktionskontext ist. Hier wird obj als Parameter an func übergeben. Dies zeigt in der Funktion auf das Objekt Objekt. Die Funktion func entspricht hier tatsächlich


function func() {
 console.log(obj.name);
}
Nach dem Login kopieren

2. Ausleihen von Methoden von anderen Objekten

Schauen Sie sich zuerst das Beispiel an


var Person1 = function () {
 this.name = &#39;linxin&#39;;
}
var Person2 = function () {
 this.getname = function () {
  console.log(this.name);
 }
 Person1.call(this);
}
var person = new Person2();
person.getname();  // linxin
Nach dem Login kopieren
Aus dem Obigen können wir sehen, dass das von Person2 instanziierte Objekt Person den Namen in Person1 über die getname-Methode erhält. Da in Person2 die Funktion von Person1.call(this) darin besteht, das Person1-Objekt anstelle dieses Objekts zu verwenden, verfügt Person2 über alle Eigenschaften und Methoden in Person1, was dem Erben der Eigenschaften und Methoden von Person1 durch Person2 entspricht.

3. Aufrufen von Funktionen

Die Methoden apply und call bewirken, dass die Funktion sofort ausgeführt wird, sodass sie auch zum Aufrufen von Funktionen verwendet werden können .


function func() {
 console.log(&#39;linxin&#39;);
}
func.call();   // linxin
Nach dem Login kopieren

Der Unterschied zwischen call und bind

Eine Methode namens bind wurde in EcmaScript5 und in niedrigeren Versionen erweitert von IE inkompatibel. Es ist dem Aufruf sehr ähnlich. Der erste Parameter ist das Objekt als Funktionskontext und der zweite Teil des Parameters ist eine Liste, die mehrere Parameter akzeptieren kann.

Die Unterschiede zwischen ihnen sind wie folgt.

1.bind Der Rückgabewert ist die Funktion


var obj = {
 name: &#39;linxin&#39;
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin
Nach dem Login kopieren
Die Bindungsmethode funktioniert nicht wird sofort ausgeführt, gibt aber eine Funktion zurück, die den Kontext ändert this. Dies wurde jedoch in der ursprünglichen Funktion func nicht geändert und zeigt weiterhin auf das globale Objektfenster.

2. Verwendung von Parametern


function func(a, b, c) {
 console.log(a, b, c);
}
var func1 = func.bind(null,&#39;linxin&#39;);
func(&#39;A&#39;, &#39;B&#39;, &#39;C&#39;);   // A B C
func1(&#39;A&#39;, &#39;B&#39;, &#39;C&#39;);   // linxin A B
func1(&#39;B&#39;, &#39;C&#39;);    // linxin B C
func.call(null, &#39;linxin&#39;);  // linxin undefined undefined
Nach dem Login kopieren
Aufruf soll den zweiten und nachfolgenden ersetzen Parameter werden als tatsächliche Parameter der func-Methode übergeben, und die tatsächlichen Parameter der func1-Methode werden basierend auf den Parametern in bind angeordnet.

In Browsern niedrigerer Versionen gibt es keine Bind-Methode, wir können auch selbst eine implementieren.


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Anwendungsbeispielen zum Unterschied zwischen „Apply' und „Call', „Call' und „Bind' in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage