Dies weist auf die Verwendung mit „call“ und „apply“ hin

Dieses Mal werde ich Ihnen die Verwendung dieses Zeigers und des Aufrufs und der Anwendung vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung dieses Zeigers und des Aufrufs und der Anwendung? sehen.

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

2. Wenn eine Funktion als Methode eines 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 3:

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

Bei Beispiel 3 gibt es einen weiteren Sonderfall, nämlich wenn der

Konstruktor zurückkehrt ein Objekt durch „return“, this Das Endergebnis dieser Operation gibt dieses Objekt zurück, nicht das neu erstellte 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:

Das JQuery-Ganzseiten-Plug-In fügt Header und Tail hinzu, die sich auf das Urheberrecht beziehen.

Detaillierte Erläuterung der Schritte der Webpack-Verpackung und Komprimierung von js und css

Detaillierte Erläuterung der Sass-Konfigurationsschritte in Vue

Das obige ist der detaillierte Inhalt vonDies weist auf die Verwendung mit „call“ und „apply“ hin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!