Plusieurs façons d'appeler cette fonction en js

La signification de ceci en JavaScript est très riche. Il peut s'agir de l'objet global, de l'objet actuel ou de n'importe quel objet, selon la manière dont la fonction est appelée. Les fonctions peuvent être appelées des manières suivantes : en tant que méthode objet, en tant que fonction, en tant que constructeur, appliquer ou appeler.

Appel de méthode objet

Lorsqu'il est appelé en tant que méthode objet, celui-ci sera lié à l'objet.

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

   Copier après la connexion

Je voudrais souligner une chose ici, c'est-à-dire que cela obtient la valeur correspondante lorsque la fonction est exécutée, pas lorsque la fonction est définie . Même s'il s'agit d'un appel de méthode objet, si l'attribut de fonction de la méthode est passé dans une autre portée sous la forme d'un nom de fonction, le pointeur de celle-ci sera modifié. Laissez-moi vous donner un exemple :

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);

   Copier après la connexion

C'est tout. Cela peut être un endroit déroutant.

Appel de fonction

La fonction peut également être appelée directement à ce stade, celle-ci est liée à l'objet global.

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

   Copier après la connexion

Mais il y aura quelques problèmes, c'est-à-dire que pour les fonctions définies à l'intérieur de la fonction, cela pointera également vers le monde global, qui est exactement ce que nous voulons au contraire. Le code est le suivant :

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

   Copier après la connexion

Nous constaterons que non seulement l'effet de mouvement que nous souhaitons n'est pas terminé, mais qu'il y aura deux autres variables globales . Alors comment le résoudre ? Enregistrez-le simplement dans une variable lors de la saisie d'une fonction dans une fonction, puis utilisez la variable. Le code est le suivant :

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

   Copier après la connexion

Appel du constructeur

Lorsque vous créez vous-même un constructeur en javascript, vous pouvez l'utiliser pour pointer à l'objet nouvellement créé. Cela empêche que cela dans la fonction pointe vers le

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

   Copier après la connexion

apply ou call

Ces deux méthodes peuvent changer de contexte d'exécution de fonction, c'est-à-dire changer l'objet lié à ceci. Apply et call sont similaires. La différence est que lors de la transmission des paramètres, une exigence est un tableau et l'autre exigence est qu'ils soient transmis séparément. Nous prenons donc apply comme exemple :

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

   Copier après la connexion

Vous pouvez voir que lorsque vous accédez normalement à la méthode dans l'objet, cela pointe vers l'objet. Après avoir utilisé apply, lorsque apply n'a pas de paramètres, l'objet actuel de this est l'objet global. Lorsque apply a des paramètres, l'objet actuel de this est le paramètre.

Appel de la fonction flèche

Une chose à ajouter ici est que dans la norme JavaScript de nouvelle génération ES6, la fonction flèche ceci est Pointe toujours vers this lorsque la fonction est définie, et non vers lorsqu'elle est exécutée. Nous utilisons un exemple pour comprendre

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

   Copier après la connexion

Le code ci-dessus provoquera une erreur car le pointeur de ceci passe de o à global. Nous devons modifier le code ci-dessus comme suit :

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

   Copier après la connexion

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

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

   Copier après la connexion

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

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

   Copier après la connexion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!