Es gibt mehrere Möglichkeiten, diese Funktion in js aufzurufen

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.

1. 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 dies den entsprechenden Wert erhält, wenn die Funktion ausgeführt wird, nicht wenn die Funktion definiert ist . 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:

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

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

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

1. 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:

1. 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 selbst einen Konstruktor in Javascript erstellen, können Sie diesen zum Zeigen verwenden zum neu erstellten Objekt. Dadurch wird verhindert, dass dies in der Funktion auf die globale

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

apply or call

Diese beiden Methoden kann den Funktionsausführungskontext wechseln. das heißt, das daran gebundene Objekt zu ä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:

1. <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 auf das Objekt verwiesen wird. 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. Wir verwenden ein Beispiel, um zu verstehen:

1. 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:

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

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

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

这回this就指向o了，我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。

1. var x = 1,  
       o = {  
           x : 10,  
           test : () => this.x  
       };  
     
   o.test(); // 1  
   o.test.call(o); // 依然是1

这样就可以明白各种情况下this绑定对象的区别了。

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, diese Funktion in js aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!