Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung des Aufrufs in Javascript

Ausführliche Erklärung des Aufrufs in Javascript

php中世界最好的语言
Freigeben: 2018-03-14 13:25:31
Original
3288 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung zum Aufrufen von JavascriptWas sind die Vorsichtsmaßnahmen bei der Verwendung von Call-in-Javascript Schauen Sie einmal vorbei.

Zunächst müssen Sie verstehen, dass die Funktion selbst einige eigene

Attribute haben wird, wie zum Beispiel:

Länge: die Anzahl der formalen Parameter;

Name: Funktionsname;
Prototyp: Der Prototyp der Klasse. Die im Prototyp definierten Methoden sind alle öffentliche Methoden der aktuellen Instanz dieser Klasse.
Prototyp: Behandeln Sie die Funktion als gewöhnliches Objekt. Verweis auf den Prototyp der Funktionsklasse
Funktion ist das komplexeste und wichtigste Wissen im gesamten JavaScript. Für eine Funktion gibt es mehrere Rollen:

function Fn() {
    var num = 500;    this.x = 100;
}
Fn.prototype.getX = function () {
    console.log(this.x);
}
Fn.aaa = 1000;var f = new Fn;
f.num // undefinedf.aaa // undefined12345678910111213
var res = Fn(); // res是undefined Fn中的this是window
Nach dem Login kopieren
Rolle 1: Gewöhnliche Funktion Für Fn, es ist selbst eine gewöhnliche Funktion, die bei der Ausführung einen privaten Bereich bildet und nach Abschluss der Ausführung eine formale Parameterzuweisung, Voranalyse, Codeausführung und Speicherzerstörung durchführt.

Rolle 2: Klasse, die eine eigene Instanz hat, f Es ist eine Instanz von Fn als Klasse. Es gibt auch ein Attribut namens Prototyp, das sein eigener Prototyp ist.

Rolle drei: gewöhnliche Objekte , Fn und var obj = {} Obj in ist dasselbe, es ist ein gewöhnliches Objekt (alle Funktionen sind Instanzen von Function. Als Objekt kann es einige eigene private Eigenschaften haben, und Function.prototype kann auch gefunden werden). durch Proto;

oben für Funktionen Es gibt drei Rollen. Die meisten Schüler haben vielleicht keine Zweifel an Rolle eins und Rolle zwei, aber sie haben vielleicht ein wenig Zweifel an Rolle drei. Dann zeichnen Sie ein Bild, um es zu verstehen:

Funktioniert wie gewöhnliche Objekte .png

rufen Sie ausführlich auf

Aufrufs

grundlegende Verwendung

var ary = [12, 23, 34]; 
ary.slice();
Nach dem Login kopieren
Der Ausführungsprozess der beiden oben genannten Zeilen von Der einfache Code lautet: ary Diese Instanz durchläuft die Prototypenkette. Der Suchmechanismus findet die Slice-Methode in Array.prototype und führt die gefundene Slice-Methode aus. Während der Ausführung der Slice-Methode wird das Ary-Array abgefangen.


Hinweis: Bevor die Slice-Methode ausgeführt wird, findet ein Suchvorgang für den Prototyp statt (wenn er in der aktuellen Instanz nicht gefunden wird, wird er gemäß der Prototypenkette durchsucht).

Nachdem wir wissen, dass es einen Suchprozess zum Aufrufen einer Methode für ein Objekt geben wird, schauen wir uns Folgendes an:

var obj = {name:’iceman’}; 
function fn() { 
console.log(this); 
console.log(this.name); 
} 
fn(); // this –> window 
// obj.fn(); // Uncaught TypeError: obj.fn is not a function 
fn.call(obj);
Nach dem Login kopieren
Die Rolle der Aufrufmethode: Suchen Sie zuerst nach der Aufrufmethode. und schließlich in der Funktion durch die Prototypenkette Suchen Sie die Aufrufmethode im Prototyp und lassen Sie sie dann ausführen. Wenn Sie die Aufrufmethode ausführen, wird dies in der Fn-Methode zum ersten Parameterwert obj und führt schließlich die Fn-Funktion aus .


2.2. Prinzip der Aufrufmethode

Simulieren Sie die integrierte Aufrufmethode in Function, schreiben Sie eine myCall-Methode und erkunden Sie das Ausführungsprinzip der Aufrufmethode

function sum(){
    console.log(this);
}function fn(){
    console.log(this);
}var obj = {name:'iceman'};Function.prototype.myCall = function (context) {
    // myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名
    // 1、让fn中的this关键字变为context的值->obj
    // 让this这个函数中的"this关键字"变为context
    // eval(this.toString().replace("this","obj"));
    // 2、让fn方法在执行
    // this();};1234567891011121314151617
Nach dem Login kopieren
fn. myCall(obj); // Die ursprüngliche this in myCall-Methode ist fn

sum.myCall(obj); // Die ursprüngliche this in myCall-Methode ist sum
Wenn fn.myCall(obj ); diese Codezeile wird ausgeführt. Wenn gemäß den Suchregeln dafür „.“ vor der myCall-Methode steht, dann ist dies in myCall fn. Um die myCall-Methode auszuführen, wird im ersten Schritt this im Methodenkörper durch das eingehende Objekt ersetzt und das ursprüngliche this ausgeführt. Hinweis: Das ursprüngliche this wird ausgeführt (ich habe das schon lange verstanden, als ich es war). Dies lernen). In diesem Artikel wird fn ausgeführt.

Sind Sie etwas verwirrt, nachdem Sie den obigen Absatz gelesen haben? Haha, es ist in Ordnung. Schauen wir uns zum Verständnis das folgende Beispiel an.

Klassisches Beispiel einer Aufrufmethode

function fn1() {
    console.log(1);
}function fn2() {
    console.log(2);
}123456
Nach dem Login kopieren
Ausgabe eins

fn1.call(fn2); // 1
Nach dem Login kopieren
Zuerst findet fn1 die Aufrufmethode auf Function.prototype über den Prototypketten-Suchmechanismus und lässt Die Aufrufmethode wird ausgeführt. Zu diesem Zeitpunkt ist dies in der Aufrufmethode der zu bedienende fn1. Lassen Sie während der Ausführung des Aufrufmethodencodes zunächst das Schlüsselwort „this“ in fn1 in fn2 ändern und dann die Methode fn1 ausführen.


Hinweis: Beim Ausführen der Aufrufmethode ändert sich dies in fn1 zwar in fn2, aber der im Methodenkörper von fn1 ausgegebene Inhalt enthält keinen damit verbundenen Inhalt, also immer noch Ausgabe 1.

Ausgabe 2

fn1.call.call(fn2); // 2
Nach dem Login kopieren
Zuerst findet fn1 die Aufrufmethode für Function.prototype über die Prototypkette und lässt dann die Aufrufmethode den Aufruf für den Funktionsprototyp über den Prototyp finden. (Da der Wert von call selbst auch eine Funktion ist, kann auch Function.prototype verwendet werden.) Wenn der Aufruf zum zweiten Mal gefunden wird, wird die Methode in fn1.call ausgeführt In dieser Methode wird fn2 und dann wird fn1.call ausgeführt.


Dieses Beispiel ist etwas kompliziert, aber lassen Sie es uns Schritt für Schritt verstehen. Ganz am Anfang ist das im letzten Aufruf der Codezeile fn1.call.call(fn2) fn1.call. Basierend auf dem vorherigen Verständnis können wir wissen, dass das Prinzip von fn1.call ungefähr ist:

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};1234567
Nach dem Login kopieren
Schreiben Sie den obigen Code in einer anderen Form:

Function.prototype.call = test1;function test1 (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};12345678
Nach dem Login kopieren
Wir wissen, dass diese beiden Schreibweisen den gleichen Effekt haben. Dann können Sie fn1.call.call(fn2) zu diesem Zeitpunkt als test1.call(fn2) schreiben, und dieser In-Call ist test1:

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是test1};1234567
Nach dem Login kopieren
Hinweis: Dieser In-Call ist zu diesem Zeitpunkt test1.

Dann ersetzen Sie dies im Aufruf durch fn2, dann wird die test1-Methode zu:

Function.prototype.call = function (context) {
    // 省略其他代码
    fn2(); 
};12345
Nach dem Login kopieren

所以最后是fn2执行,所以最后输出2。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

spring boot的定时任务应该如何使用

javaScript使用call和apply

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Aufrufs 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