ceci, cela, discutez-en à nouveau en javascript, compétences _javascript super complètes (classiques)

JavaScript est un langage de script et donc considéré par beaucoup comme facile à apprendre. Au contraire, JavaScript prend en charge des fonctionnalités avancées telles que la programmation fonctionnelle, les fermetures, l'héritage basé sur des prototypes, etc. Cet article ne prend qu'un exemple : le mot-clé this en JavaScript, et analyse sa signification dans différentes situations de manière simple et facile à comprendre, les raisons de cette situation et la méthode de liaison fournie par les outils JavaScript tels que Dojo. . On peut dire que ce n'est qu'en maîtrisant correctement le mot-clé this en JavaScript que l'on pourra saisir le seuil du langage JavaScript.

Quant à ce truc en js, beaucoup de gens l'ont expliqué. Ça a l'air très haut de gamme, je me demande si vous le comprenez ?

Citons d'abord celui le plus haut de gamme de Script Home, oui ceci

D'accord, voici mon explication frustrante

Argument : ce n'est pas une variable, ni une propriété, et on ne peut pas lui attribuer de valeur. Il pointe toujours vers l'objet qui l'appelle

Cela semble trop vague, rappelez-vous juste la chose la plus importante : "Il pointe toujours vers l'objet qui l'appelle", donc si vous trouvez l'objet qui l'appelle, vous saurez à qui cela pointe

1.

alert(this); 

Regardez, qu'est-ce qui apparaît ? C'est soit une « fenêtre d'objet », soit un « objet ». Bref, c'est un objet.

alert(this === window); 

Le résultat est 'vrai', donc maintenant l'objet qui l'appelle est window

2.

var test = function(){
  alert(this);
}
test(); 

Devinez ce qui apparaît ci-dessus, est-ce la même chose que « alert(this) »

var test = function(){
  alert(this === window);
 }
test(); 

Exécutez le code ci-dessus, est-ce que « vrai » apparaît ?

Est-ce la fin de l’affaire ?

Si c'est si simple, pourquoi tant de gens parlent de cet oiseau ?

3.

Reviens

var test = function(){
  alert(this === window);
 }
new test(); 

Hé, pourquoi c'est « faux » cette fois ?

Rappelez-vous que "cela pointe toujours vers l'objet qui l'appelle". L'objet direct qui appelle ce code à "1". l'appel à celui-ci est toujours "window" (ne vous y trompez pas, bien que la fonction soit un objet, mais elle est appelée par un autre objet), "new" est utilisé à ce moment-là ; réellement modifié. Il s'agit d'un constructeur, le constructeur crée un nouvel objet vide lors de sa création, c'est-à-dire que "new test()" crée un nouvel objet, puis cet objet pointe vers le code dans la fonction "test", donc ce n'est plus un objet fenêtre, mais un nouvel objet créé par ce constructeur.

4.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

Avec les arguments ci-dessus, c'est désormais clair !

5.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

donc, vous ne pensez pas que le résultat est "faux", vous vous trompez, bien que la valeur de 'test1' soit 'test', 'test1' n'est-il pas toujours l'objet de 'test', il a un nouvel objet, vous comprenez pour l'instant. Ils sont référencés. Les deux pointent vers le même objet. Voici le code ci-dessous pour preuve

.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

Si "1" apparaît, viens me gronder

6. L'ensemble du complexe

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

Est-ce « vrai » ou « faux » ?

Selon la théorie ci-dessus, à ce moment "this" n'est plus directement appelé par 'test', mais par 'test.b', comme en témoigne le morceau de code suivant

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

7. Il vaut mieux rendre les choses plus compliquées

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

Vous ne pensez pas que « vrai » apparaît ? D'après la théorie ci-dessus, « innerTest » est appelé par « test », et ensuite « ceci » pointe vers « test » ?
Eh bien, l'erreur réside dans celui qui a appelé 'innerTest'. En fait, ces fonctions sont toutes appelées par l'objet 'window'. Même si vous imbriquez mille calques, chaque fonction est appelée par l'objet 'window'. . Un morceau de code comme preuve

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8. Un autre spécial

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

Je pense que tout le monde le devinera correctement. La fonction de cette fonction est "d'appeler une méthode d'un objet et de remplacer l'objet actuel par un autre objet." Ainsi, l'objet 'windows' a été remplacé par 'test1', naturellement. c'est 'faux', voici le code suivant pour prouver

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

Alors des choses comme « appeler » seront similaires

9. Un autre héritage prototype, différent de l'héritage littéral

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10. Ce qui reste, peut-être l'objet 'dom'

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

Vous devriez comprendre après avoir lu ce qui précède, le « ceci » représente respectivement Shenma