Heim Web-Frontend js-Tutorial Der Zeiger davon in JS und die Funktionen von call und apply

Der Zeiger davon in JS und die Funktionen von call und apply

Oct 08, 2018 pm 04:25 PM
apply this

Dieser Artikel teilt Ihnen den grundlegenden Inhalt von JS mit, dieser Zeiger und die damit verbundenen Wissenspunkte zum Aufrufen und Anwenden. Freunde, die interessiert sind, können ihn lernen und darauf verweisen.

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 eine Funktion als normale Funktion aufgerufen wird, zeigt dies auf das globale Objekt

2. Wenn eine Funktion als Methode eines Objekts aufgerufen wird, Dies zeigt auf das Objekt

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

Beispiel 1:

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

Beispiel 2:

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

Beispiel drei:

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

Für Beispiel drei gibt es einen weiteren Sonderfall, nämlich dass Das heißt, wenn der Konstruktor ein Objekt über „return“ zurückgibt. Zu diesem Zeitpunkt gibt das Endergebnis dieser Operation dieses Objekt zurück, nicht das neu erstellte Objekt, sodass dies in diesem Fall keinen Nutzen hat.

Beispiel 4:

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

Beispiel 5:

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

anrufen und bewerben Die Rolle von

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. Parameterliste.

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
Nach dem Login kopieren

call Die Anzahl der übergebenen Parameter ist nicht festgelegt. Wie bei apply wird auch der erste Parameter verwendet, um The anzugeben Punkt davon im Funktionskörper, beginnend mit dem zweiten Parameter, 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
Nach dem Login kopieren

Darüber hinaus implementieren die meisten fortgeschrittenen Browser auch die Bind-Methode. Der Unterschied zwischen dieser Methode und Call and Apply besteht darin, dass sich Bind nur ändert Die interne Funktion, auf die dies verweist, wird jedoch nicht sofort ausgeführt. Sie müssen sie explizit aufrufen.

Beispiel 3: Simulieren der 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');
Nach dem Login kopieren

Das habe ich verloren

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 dies auf das Objekt „boy“. Wenn eine andere Variable auf die Methode „getName“ verweist, da es als normaler Funktionsaufruf verwendet wird, zeigt dies also auf das globale Objektfenster

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

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

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

Das Obige ist der Inhalt dieses Kapitels Alle Inhalte, bitte besuchen Sie JavaScript Video Tutorial für weitere verwandte Tutorials!

Das obige ist der detaillierte Inhalt vonDer Zeiger davon in JS und die Funktionen von call und apply. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Beispielanalyse des Java Fluent Mybatis-Aggregationsabfrage- und Anwendungsmethodenprozesses Beispielanalyse des Java Fluent Mybatis-Aggregationsabfrage- und Anwendungsmethodenprozesses May 22, 2023 pm 01:31 PM

Datenaufbereitung: Um die Bedingungen der Abfrage zu aggregieren, werden mehrere Daten hinzugefügt. MIN versuchen wir, das Mindestalter zu erreichen. Methodenimplementierung @OverridepublicIntegergetAgeMin(){Mapresult=testFluentMybatisMapper.findOneMap(newTestFluentMybatisQuery().select.min.age("minAge").end()).orElse(null);returnresult!=null?Convert.toInt(result.get (&qu

Lassen Sie uns darüber sprechen, warum Vue2 dadurch in verschiedenen Optionen auf Eigenschaften zugreifen kann Lassen Sie uns darüber sprechen, warum Vue2 dadurch in verschiedenen Optionen auf Eigenschaften zugreifen kann Dec 08, 2022 pm 08:22 PM

Dieser Artikel hilft Ihnen bei der Interpretation des Vue-Quellcodes und stellt vor, warum Sie damit in Vue2 auf Eigenschaften in verschiedenen Optionen zugreifen können. Ich hoffe, dass er für alle hilfreich ist!

Ein Artikel, der diesen Punkt versteht und 70 % der Front-End-Leute erreicht Ein Artikel, der diesen Punkt versteht und 70 % der Front-End-Leute erreicht Sep 06, 2022 pm 05:03 PM

Ein Kollege blieb aufgrund eines Fehlers stecken, auf den dadurch hingewiesen wurde. Dieses Zeigeproblem führte dazu, dass eine Pfeilfunktion verwendet wurde, was dazu führte, dass die entsprechenden Requisiten nicht abgerufen werden konnten. Er wusste es nicht, als ich es ihm vorstellte, und dann habe ich mir bewusst die Front-End-Kommunikationsgruppe angesehen. Bisher verstehen es mindestens 70 % der Front-End-Programmierer nicht Sie diesen Link Wenn alles unklar ist Wenn Sie es noch nicht gelernt haben, geben Sie mir bitte eine große Klappe.

Clevere Möglichkeit, dieses Schlüsselwort in jQuery zu verwenden Clevere Möglichkeit, dieses Schlüsselwort in jQuery zu verwenden Feb 25, 2024 pm 04:09 PM

Flexible Verwendung dieses Schlüsselworts in jQuery In jQuery ist das Schlüsselwort this ein sehr wichtiges und flexibles Konzept. Es wird verwendet, um auf das aktuell manipulierte DOM-Element zu verweisen. Durch die rationale Verwendung dieses Schlüsselworts können wir Elemente auf der Seite einfach bedienen und verschiedene interaktive Effekte und Funktionen erzielen. In diesem Artikel werden spezifische Codebeispiele kombiniert, um die flexible Verwendung dieses Schlüsselworts in jQuery vorzustellen. Dieses einfache Beispiel Schauen wir uns zunächst ein einfaches Beispiel an. Angenommen, wir haben eine

Was ist das? Eine ausführliche Analyse dazu in JavaScript Was ist das? Eine ausführliche Analyse dazu in JavaScript Aug 04, 2022 pm 05:02 PM

Was ist das? Der folgende Artikel wird Ihnen dies in JavaScript vorstellen und auf die Unterschiede zwischen verschiedenen Aufrufmethoden von Funktionen eingehen. Ich hoffe, er wird Ihnen hilfreich sein!

So verwenden Sie diese Methode in Java So verwenden Sie diese Methode in Java Apr 18, 2023 pm 01:58 PM

1. Schlüsselwort this 1. Typ davon: Welches Objekt aufgerufen wird, ist der Referenztyp dieses Objekts 2. Zusammenfassung der Verwendung 1. this.data;//Zugriffsattribut 2. this.func();//Zugriffsmethode 3.this ( );//Andere Konstruktoren in dieser Klasse aufrufen 3. Erklärung der Verwendung 1.this.data wird in Mitgliedsmethoden verwendet. Lassen Sie uns sehen, was passiert, wenn dies nicht hinzugefügt wird classMyDate{publicintyear;publicintmonth;publicintday; intmonth,intday){ye

Wie ändert JavaScript diesen Zeiger? Kurze Analyse von drei Methoden Wie ändert JavaScript diesen Zeiger? Kurze Analyse von drei Methoden Sep 19, 2022 am 09:57 AM

Wie ändert JavaScript diesen Zeiger? Der folgende Artikel stellt Ihnen drei Möglichkeiten vor, dies in JS zu ändern. Ich hoffe, er wird Ihnen hilfreich sein!

Detaillierte Erklärung hierzu in der JavaScript-Pfeilfunktion Detaillierte Erklärung hierzu in der JavaScript-Pfeilfunktion Jan 25, 2024 pm 01:41 PM

Die Pfeilfunktion in JavaScript ist eine relativ neue Syntax. Im Gegenteil, die Pfeilfunktion zeigt auf das Gültigkeitsbereichsobjekt, das sie enthält statisch; 2. Pfeilfunktionen können nicht als Konstruktoren verwendet werden; 3. Pfeilfunktionen können nicht als Methoden verwendet werden.

See all articles