Ausführliche Erklärung dazu in js

Dies in der JavaScript-Sprache

Aufgrund seiner Laufzeitbindungsfunktion ist die Bedeutung davon in JavaScript viel umfassender. Es kann das globale Objekt, das aktuelle Objekt oder ein beliebiges Objekt sein, alles hängt von der Funktion ab Methode des Aufrufs. Es gibt mehrere Möglichkeiten, Funktionen in JavaScript aufzurufen: als Objektmethode, als Funktion, als Konstruktor und mit apply oder call. Im Folgenden werden wir die Bedeutung davon entsprechend den verschiedenen Aufrufmethoden diskutieren.

Aufruf als Objektmethode

In JavaScript sind Funktionen auch Objekte, sodass die Funktion als Eigenschaft eines Objekts verwendet werden kann. Zu diesem Zeitpunkt wird die Funktion als Methode bezeichnet Bei Verwendung dieser Art von Aufrufmethode ist diese natürlich an das Objekt gebunden.

Listing 2. point.js

1 2 3 4 5 6 7 8 9 10

var point = { x : 0, y : 0, moveTo : function(x, y) {     this.x = this.x + x;     this.y = this.y + y;     } };   point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象

Als Funktion, die

aufruft Die Funktion kann auch direkt aufgerufen werden. Zu diesem Zeitpunkt ist sie an das globale Objekt gebunden. Im Browser ist window das globale Objekt. Zum Beispiel im folgenden Beispiel: Wenn die Funktion aufgerufen wird, wird diese an das globale Objekt gebunden und dann die Zuweisungsanweisung ausgeführt. Dies entspricht der impliziten Deklaration einer globalen Variablen, was offensichtlich nicht das ist, was der Aufrufer möchte.

Listing 3. nonsense.js

1

1 2 3 4 5 6

function makeNoSense(x) { this.x = x; }   makeNoSense(5); x;// x 已经成为一个值为 5 的全局变量

2

3

4

5

6

function makeNoSense(x) {

this.x = x;

} code><div class="Zeilennummer3 index2 alt2"><code class="htmlscript plain">} code><div class="Zeilennummer4 index3 alt1"> <div class="Zeilennummer5 index4 alt2"> <code class="htmlscript plain">makeNoSense(5);

x ;// x ist zu einer globalen Variablen mit dem Wert 5 geworden

Bei internen Funktionen, also Funktionen, die in einem anderen Funktionskörper deklariert sind, führt diese Methode der Bindung an das globale Objekt zu einem weiteren Problem. Wir nehmen immer noch das zuvor erwähnte Punktobjekt als Beispiel. Dieses Mal hoffen wir, zwei Funktionen in der moveTo-Methode zu definieren, um die x- bzw. y-Koordinaten zu übersetzen. Das Ergebnis kann unerwartet sein. Nicht nur, dass sich das Punktobjekt nicht bewegt, sondern es gibt auch zwei weitere globale Variablen x und y.

Listing 4. point.js

1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var point = { x : 0, y : 0, moveTo : function(x, y) {     // 内部函数     var moveX = function(x) {     this.x = x;//this 绑定到了哪里？    };    // 内部函数    var moveY = function(y) {    this.y = y;//this 绑定到了哪里？    };      moveX(x);    moveY(y);    } }; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var point = {

x : 0,

y : 0,

moveTo : function(x, y) {

// Interne Funktion

var moveX = function(x) {

this.x = x;//Wohin ist das gebunden?

} // Interne Funktion

var moveY = function(y) {

this.y = y;//Wohin ist das gebunden?

}

moveX(x) ;

moveY(y ).

}

};

point.moveTo(1, 1 );

point.x;0

point.y; //==>0

x; //==>1

y;

Dies ist ein Designfehler in JavaScript. Die richtige Designmethode besteht darin, dass diese der inneren Funktion an das Objekt gebunden wird, das ihrer äußeren Funktion entspricht , haben kluge JavaScript-Programmierer herausgefunden, wie man Variablen ersetzt, und der Konvention zufolge wird die Variable normalerweise so genannt.

Listing 5. point2.js

1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var point = { x : 0, y : 0, moveTo : function(x, y) {      var that = this;     // 内部函数     var moveX = function(x) {     that.x = x;     };     // 内部函数     var moveY = function(y) {     that.y = y;     }     moveX(x);     moveY(y);     } }; point.moveTo(1, 1); point.x; //==>1 point.y; //==>1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

var point = {

x : 0,

y : 0,

moveTo : function(x, y) {

var that = this

// Interne Funktion

var moveX = function(x) {

that.x = x

};

// Interne Funktion

var moveY = function(y) {

that.y = y;

}

moveX(x moveY(y);

}

};

point.moveTo(1, 1);

point.x; //==>1

point.y; //==>1

Wird als Konstruktor aufgerufen

JavaScript unterstützt objektorientierte Programmierung. Im Gegensatz zu gängigen objektorientierten Programmiersprachen verfügt JavaScript nicht über das Konzept einer Klasse -basierte Vererbung. Dementsprechend ist auch der Konstruktor in JavaScript etwas ganz Besonderes. Wenn er nicht mit new aufgerufen wird, ist er dasselbe wie eine gewöhnliche Funktion. Als weitere Konvention beginnen Konstrukteure mit einem Großbuchstaben, um Aufrufer daran zu erinnern, sie auf die richtige Weise aufzurufen. Bei korrektem Aufruf wird dieser an das neu erstellte Objekt gebunden.

Listing 6. Point.js

1

1 2 3 4

function Point(x, y){    this.x = x;    this.y = y; }

2

3

4

function Point(x, y){

this .x = x;

this.y = y ;

}

Verwenden Sie apply oder call, um aufzurufen

1 2 3 4 5 6 7 8 9 10 11 12 13

function Point(x, y){    this.x = x;    this.y = y;    this.moveTo = function(x, y){        this.x = x;        this.y = y;    } }   var p1 = new Point(0, 0); var p2 = {x: 0, y: 0}; p1.moveTo(1, 1); p1.moveTo.apply(p2, [10, 10]);

Lassen Sie uns noch einmal betonen, dass Funktionen in JavaScript auch Objekte sind und Objekte über Methoden apply und call verfügen sind Methoden von Funktionsobjekten. Diese beiden Methoden sind äußerst leistungsfähig. Sie ermöglichen das Wechseln des Kontexts, in dem die Funktion ausgeführt wird, also des Objekts, an das sie gebunden ist. Viele Techniken und Bibliotheken in JavaScript verwenden diese Methode. Schauen wir uns ein konkretes Beispiel an:

Listing 7. Point2.js

Im obigen Beispiel verwenden wir den Konstruktor, um ein Objekt p1 zu generieren, das auch über eine moveTo-Methode verfügt. Wir verwenden Objektliterale, um ein weiteres Objekt p2 zu erstellen, wie Sie sehen Mit apply kann die Methode von p1 auf p2 angewendet werden. Zu diesem Zeitpunkt ist dies auch an das Objekt p2 gebunden. Ein weiterer Methodenaufruf hat ebenfalls die gleiche Funktion, der Unterschied besteht jedoch darin, dass der letzte Parameter nicht einheitlich als Array, sondern separat übergeben wird.

1 2 3 4 5 67 8 9 10 11 12 13

function Point(x, y ) { this.x = x code> this.y = this.moveTo = function(x, y){ this.x = x this.y = y } } var p1 = new Point(0, 0); var p2 = {x: 0, y: 0}; / code><div class="Zeilennummer12 index11 alt1"> <code class="htmlscript plain">p1.moveTo(1, 1); p1.moveTo.apply(p2, [10, 10]);

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung dazu in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!