Verwendung von apply und call in js

Dieser Artikel stellt hauptsächlich die Verwendung von „Apply“ und „Call“ in js vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Die Prototypdefinition der Funktion in ECAMScript3 Es gibt zwei Methoden: Function.prototype.call und Function.prototype.apply. In diesem Artikel wird die Verwendung von „Apply“ und „Call“ im Detail vorgestellt. Sie können bei Bedarf darauf zurückgreifen.

Vorwort

call und apply dienen beide dazu, den Kontext zu ändern, der der Kontext ist, wenn eine Funktion ausgeführt wird. , mit anderen Worten, um den Zeiger davon innerhalb des Funktionskörpers zu ändern .
call und apply haben genau die gleiche Funktion, akzeptieren Parameter jedoch auf unterschiedliche Weise.

Methodendefinition
apply
Function.apply(obj,args) Methode kann zwei Parameter empfangen:

obj : Dieses Objekt ersetzt dieses Objekt in der Function-Klasse

args: Dies ist ein Array oder arrayähnlich, und die Apply-Methode übergibt die Elemente in dieser Sammlung als Parameter für die aufgerufene Objektfunktion.

call

Der erste Parameter der Call-Methode ist derselbe wie der erste Parameter der Apply-Methode , außer Der zweite Parameter ist eine Parameterliste

Wenn im nicht strengen Modus der erste Parameter als Null oder undefiniert übergeben wird, verweist dieser im Funktionskörper auf das Standard-Hostobjekt. im Browser Es ist Fenster

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

Verwendung

Eine Möglichkeit, „zu kapern“ andere

Zu diesem Zeitpunkt wird die logName-Methode in foo durch bar referenziert, und this zeigt darauf bar

var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

Vererbung implementieren

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

in der Praxis Während der Entwicklung stoßen wir häufig auf Szenarien, in denen dieser Zeiger versehentlich geändert wird.
hat eine lokale fun-Methode. Wenn fun als normale Funktion aufgerufen wird, zeigt funs internes this auf window, aber wir möchten oft, dass es auf den Knoten #test verweist, siehe folgenden Code:

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}

Verwenden Sie call,applyWir können dieses Problem leicht lösen

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}

Natürlich können Sie das auch tun, aber in ECMAScript 5 Im strikten-Modus wurde festgelegt, dass dies in diesem Fall nicht auf das globale Objekt zeigt, sondern undefiniert ist:

window.id="window";
document.querySelector('#test').onclick = function(){
  var that = this;
  console.log(this.id);//test
  var fun = function(){
    console.log(that.id);
  }
  fun();//test
}

function func(){
  "use strict"
  alert ( this );  // 输出：undefined
}
func();

Andere Verwendungen

Array-artig

Hier werden Objekte, die die folgenden Bedingungen erfüllen, als Array-artig bezeichnet

1. Sie haben das Längenattribut

2. Speichern Sie Daten nach Index

3. Push, Pop und andere Methoden ohne Arrays

Gemeinsame Klassenarrays umfassen Argumente, NodeList!

(function(){
  Array.prototype.push.call(arguments,4);
  console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)

Auf diese Weise kann eine 4 in Argumente verschoben werden

Array.prototype.push Seite kann die Zusammenführung zweier Arrays realisieren

Die gleiche Push-Methode wird nicht bereitgestellt, um ein Array zu pushen, aber es bietet push(param1, param,...paramN), sodass Sie auch apply verwenden können, um das Array zu ersetzen, das heißt:

var arr1=new Array("1","2","3"); 
var arr2=new Array("4","5","6"); 
Array.prototype.push.apply(arr1,arr2); 
console.log(arr1);//["1", "2", "3", "4", "5", "6"]

kann auch so verstanden werden, arr1 ruft die Methode push auf und die Parameter werden durch apply ersetzt Konvertieren Sie das Array in eine Sammlung von Parameterlisten

Zum Beispiel möchte ich den Maximalwert in einem Array finden

(function(){
  var maxNum = Math.max.apply(null,arguments);
  console.log(maxNum);//56
})(34,2,56);

Beurteilen Sie den Typ

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

Verwandte Empfehlungen:

Verwendung von URL, href, src in JS

Instanzanalyse davon in Js

Das obige ist der detaillierte Inhalt vonVerwendung von apply und call in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!