Detaillierte Erläuterung des JavaScript-Zeiger-Beispielcodes

Die Bedeutung davon ist in JavaScript sehr umfangreich. Es kann sich um das globale Objekt, das aktuelle Objekt oder ein beliebiges Objekt handeln, je nachdem, wie die Funktion aufgerufen wird. Funktionen können auf folgende Arten aufgerufen werden: als Objektmethode, als Funktion, als Konstruktor, Apply oder Call.

Objektmethodenaufruf

Beim Aufruf als Objektmethode wird diese an das Objekt gebunden.

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 对象

Eines möchte ich hier betonen, nämlich, dass dieser den entsprechenden Wert erhält, wenn die Funktion ausgeführt wird, nicht wenn die Funktion definiert wird. Selbst wenn es sich um einen Objektmethodenaufruf handelt, wird der Zeiger geändert, wenn das Funktionsattribut der Methode in Form eines Funktionsnamens an einen anderen Bereich übergeben wird. Lassen Sie mich Ihnen ein Beispiel geben:

var a = {
	aa : 0,
	bb : 0,
	fun : function(x,y){
		this.aa = this.aa + x;
		this.bb = this.bb + y;
	}
};
var aa = 1;
var b = {
	aa:0,
	bb:0,
	fun : function(){return this.aa;}
}	
a.fun(3,2);
document.write(a.aa);//3，this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数，而不是函数执行的结果
	var c = aa();
	document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window
})(b.fun);

Das ist es. Dies kann ein verwirrender Ort sein.

Funktionsaufruf

Die Funktion kann zu diesem Zeitpunkt auch direkt aufgerufen werden, diese ist an das globale Objekt gebunden.

　var x = 1;
　　function test(){
　　　　this.x = 0;
　　}
　　test();
　　alert(x); //0

Aber das wird einige Probleme verursachen, das heißt, für Funktionen, die innerhalb der Funktion definiert sind, wird dies auch auf die globale Welt verweisen, was genau das Gegenteil von dem ist, was wir wollen. Der Code lautet wie folgt:

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

Wir werden feststellen, dass nicht nur der gewünschte Bewegungseffekt nicht abgeschlossen ist, sondern es auch zwei weitere globale Variablen gibt. Wie kann man es also lösen? Speichern Sie dies einfach in einer Variablen, wenn Sie eine Funktion innerhalb einer Funktion eingeben, und verwenden Sie dann die Variable. Der Code lautet wie folgt:

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

Konstruktoraufruf

Wenn Sie den Konstruktor selbst in JavaScript erstellen, können Sie damit auf das neu erstellte Objekt verweisen. Dadurch wird verhindert, dass dies in der Funktion auf die globale Welt verweist.

　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

Anwenden oder Aufrufen

Diese beiden Methoden können den Kontext der Funktionsausführung wechseln, dh die Bindung dieses Objekts ändern . Apply und Call sind ähnlich. Der Unterschied besteht darin, dass bei der Übergabe von Parametern eine Anforderung ein Array ist und die andere Anforderung darin besteht, dass sie separat übergeben werden. Nehmen wir also apply als Beispiel:

<pre name="code" class="html">var name = "window";

var someone = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};

var other = {
    name: "Tom"
};   

someone.showName();		//Bob
someone.showName.apply();    //window
someone.showName.apply(other);    //Tom

Sie können sehen, dass beim normalen Zugriff auf die Methode im Objekt diese auf das Objekt zeigt. Wenn apply nach der Verwendung keine Parameter hat, ist das aktuelle Objekt davon das globale Objekt. Wenn apply Parameter hat, ist das aktuelle Objekt davon der Parameter.

Pfeilfunktionsaufruf

Eine Sache, die hier hinzugefügt werden muss, ist, dass im Javascript-Standard ES6 der nächsten Generation die Pfeilfunktion dies ist Zeigt immer auf this, wenn die Funktion definiert ist, nicht auf , wenn sie ausgeführt wird. Lassen Sie uns das anhand eines Beispiels verstehen:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

Der obige Code verursacht einen Fehler, da sich der Zeiger davon von o auf global ändert. Wir müssen den obigen Code wie folgt ändern:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func(); 
        }, 100);
    }
};

o.test();

Verwenden Sie einfach diesen extern gespeicherten Code im Voraus. Wie bereits erwähnt, zeigt das this der Pfeilfunktion immer auf das this<, wenn die Funktion definiert ist . 🎜>, nicht bei der Ausführung. Daher ändern wir den obigen Code wie folgt:

Dieses Mal zeigt dies auf o. Wir müssen auch darauf achten, dass dadurch das Objekt, auf das gezeigt wird, nicht geändert wird apply kann sich ändern. Dies zeigt auf, ist aber in Pfeilfunktionen ungültig.

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

Auf diese Weise können Sie den Unterschied zwischen diesem Bindungsobjekt in verschiedenen Situationen verstehen.

var x = 1,
    o = {
        x : 10,
        test : () => this.x
    };

o.test(); // 1
o.test.call(o); // 依然是1

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Zeiger-Beispielcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!