Explication détaillée à ce sujet en js

Ceci en langage JavaScript

En raison de sa fonctionnalité de liaison d'exécution, la signification de ceci en JavaScript est beaucoup plus riche. Il peut s'agir de l'objet global, de l'objet actuel ou de n'importe quel objet, tout dépend de la fonction. méthode d'appel. Il existe plusieurs manières d'appeler des fonctions en JavaScript : en tant que méthode objet, en tant que fonction, en tant que constructeur et en utilisant apply ou call. Ci-dessous, nous discuterons de la signification de ceci respectivement en fonction des différentes méthodes d'appel.

Appeler en tant que méthode objet

En JavaScript, les fonctions sont également des objets, la fonction peut donc être utilisée comme propriété d'un objet. À ce stade, la fonction est appelée une méthode du. object Lorsque vous utilisez ce type de méthode d’appel, cela est naturellement lié à l’objet.

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

En tant que fonction appelant le

la fonction peut également être appelée directement, à ce stade, elle est liée à l'objet global. Dans le navigateur, window est l'objet global. Par exemple, dans l'exemple suivant : lorsque la fonction est appelée, celle-ci est liée à l'objet global, puis l'instruction d'affectation est exécutée, ce qui équivaut à déclarer implicitement une variable globale, ce qui n'est évidemment pas ce que souhaite l'appelant.

Liste 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="numéro de ligne3 index2 alt2"> <code class="htmlscript plain">} code>

makeNoSense(5);

x;// x est devenu une variable globale de valeur 5

Pour les fonctions internes, c'est-à-dire les fonctions déclarées dans un autre corps de fonction, cette méthode de liaison à l'objet global posera un autre problème. Nous prenons toujours l'objet point mentionné précédemment comme exemple. Cette fois, nous espérons définir deux fonctions dans la méthode moveTo pour traduire respectivement les coordonnées x et y. Le résultat peut être inattendu. Non seulement l’objet ponctuel ne bouge pas, mais il existe deux autres variables globales x et 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) {

// Fonction interne

var moveX = function(x) {

this.x = x;//Où est-ce lié ?

}; // Fonction interne

var moveY = function(y) {

this.y = y;//Où est-ce lié ?

};

moveX(x) ;

moveY(y);

}

};

point.moveTo(1, 1

point.x //==>0 point.y; //==>0

x; //==>1

y //==>1

Il s'agit d'un défaut de conception en JavaScript. La méthode de conception correcte est que celle de la fonction interne doit être liée à l'objet correspondant à la fonction externe afin d'éviter ce défaut de conception. , les programmeurs JavaScript intelligents ont compris comment remplacer les variables, et par convention, la variable est généralement nommée ainsi.

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

// Fonction interne

var moveX = function(x) {

that.x = x;

};

// Fonction interne

var moveY = function(y) {

that.y = y;

}

moveX(x moveY(y

}

};

point.moveTo(1, 1);

point.x; //==>1

point.y; //==>1

Appelé en tant que constructeur

JavaScript prend en charge la programmation orientée objet Contrairement aux langages de programmation orientés objet traditionnels, JavaScript n'a pas le concept de classe. Il utilise un prototype. -héritage basé sur. En conséquence, le constructeur en JavaScript est également très spécial s'il n'est pas appelé avec new, c'est la même chose qu'une fonction ordinaire. Autre convention, les constructeurs commencent par une lettre majuscule pour rappeler aux appelants de les appeler de la bonne manière. S'il est appelé correctement, ceci est lié à l'objet nouvellement créé.

Listing 6. Point.js

1

1 2 3 4

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

2

3

4

fonction Point(x, y){

ce .x = x;

this.y = y ;

}

Utilisez apply ou call pour appeler

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

Rappelons encore qu'en JavaScript, les fonctions sont aussi des objets, et les objets ont des méthodes apply et call. sont des méthodes d’objets fonction. Ces deux méthodes sont extrêmement puissantes. Elles permettent de changer le contexte dans lequel la fonction est exécutée, c'est-à-dire l'objet auquel elle est liée. De nombreuses techniques et bibliothèques en JavaScript utilisent cette méthode. Regardons un exemple concret :

Listing 7. Point2.js

Dans l'exemple ci-dessus, nous utilisons le constructeur pour générer un objet p1, qui a également une méthode moveTo ; nous utilisons des littéraux d'objet pour créer un autre objet p2, nous vous voyons. peut utiliser apply pour appliquer la méthode de p1 à p2. À ce stade, cela est également lié à l'objet p2. Un autre appel de méthode a également la même fonction, mais la différence est que le dernier paramètre n'est pas transmis uniformément sous forme de tableau, mais séparément.

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

fonction Point(x, y) { this.x = x; > code><div class="numéro de ligne3 index2 alt2"> <code class="espaces htmlscript"> this.y = y this.moveTo = function(x, y){ this.x = x this.y = y } } var p1 = nouveau Point(0, 0); var p2 = {x : 0, y : 0} ; / code><div class="numéro de ligne12 index11 alt1"> <code class="htmlscript plain">p1.moveTo(1, 1 p1.moveTo.apply(p2, [10, 10]);

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!