Explication détaillée de l'utilisation de ce mot-clé en Javascript

Il s'agit d'une fonctionnalité Javascript qui est très facile à mal comprendre puis à utiliser de manière incorrecte. Par conséquent, l'article suivant vous présente principalement les informations pertinentes sur le problème du pointage de ce mot-clé en Javascript. Les questions de test de l'article testent votre familiarité avec cela. Les amis dans le besoin peuvent s'y référer.

Préface

Javascript est un langage dynamique basé sur les objets, c'est-à-dire que tout est un objet, un très A Un exemple typique est que les fonctions sont également traitées comme des objets ordinaires. Javascript peut implémenter une programmation orientée objet à travers certains modèles de conception, dans lesquels ce « pointeur » est une fonctionnalité très importante dans la réalisation d'une programmation orientée objet. Cet article vous donnera une introduction détaillée au contenu pertinent pointé par le mot-clé this en Javascript. Faisons d'abord un petit test. Si vous obtenez toutes les réponses correctes, félicitations, vous n'avez pas besoin de lire plus loin.

Questions du test

Première question

<script>
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;
  alert(this.str);
 }
 window.demo(); // ??

 var obj = {
  str: "wangwu",
  say: function() {
   alert(this.str);
  }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

Deuxième question

<script>
 var username = &#39;zhangsan&#39;;

 (function() {
  var username = &#39;lisi&#39;;
  alert(this.username); // ??
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  function test() {
   alert(this.username);
  }

  test(); // ??
 }
 demo();
</script>

Troisième question

<script>
 function Person() {
  this.username = &#39;zhangsan&#39;;
  this.say = function() {
   alert(&#39;我叫&#39; + this.username);
  }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

Question 4

<script>
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

Réponse

• Première question : zhangsan wangwu zhangsan

• Deuxième question : zhangsan zhangsan

• La troisième question : Je m'appelle zhangsan Je m'appelle zhangsan

• La quatrième question : zhangsan zhangsan zhangsan lisi wangwu

(Regardez en bas, il y a une analyse détaillée ci-dessous)

ceci

• Pointe vers l'objet de la fonction appelante

• Aucun objet n'appelle la fonction/La fonction anonyme s'appelle elle-même (cela pointe vers la fenêtre)

• Par nouvel Objet généré

• appliquer/appeler appel

1. Objet pointant vers la fonction appelante

<script>
 // this:指向调用函数的对象
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;

  //this->window
  console.log(this);
  alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
  str: "wangwu",
  say: function() {
   // this->obj
   alert(this.str);
  }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

• La fonction globale (demo) appartient à la méthode de l'objet window La fenêtre appelle demo, donc cela pointe vers window<🎜. >

• obj appelle la méthode say, et cela pointe vers obj

• fun() est une fonction globale, et le fun déclaré reçoit une fonction simple dans obj et n'est pas appelé ( obj.say() est la fonction appelée), fun à ce moment est une fonction (function(){alert(this.str);}), puis quand fun() appelle la fonction, cela pointe vers la fenêtre

• Celui qui appelle la fonction, alors cela pointe vers qui

2. Appel de fonction sans objet/fonction anonyme self-calling-> ; cela pointe vers window

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = &#39;zhangsan&#39;;

 // 匿名函数自执行 this->window
 (function() {
  var username = &#39;lisi&#39;;
  console.log(this); // window
  alert(this.username); // zhangsan
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  // 无主函数 this->window
  function test() {
   // this->window
   alert(this.username);
  }

  test(); // zhangsan
 }
 demo();
</script>

• Parce que la fonction anonyme n'a pas de nom, elle est lié à window

• test(), celui qui appelle test points à celui qui appelle test. Bien sûr, après les tests, il n'est pas appelé par fenêtre, ni par démo. Si personne ne s'en soucie, alors il pointe vers fenêtre. C'est l'équivalent d'une fonction sans main qu'aucun propriétaire ne l'appelle.

3. Objets générés par les nouveaux

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
  // 属性
  this.username = &#39;zhangsan&#39;;
  // 方法
  this.say = function() {
   // this->p
   console.log(this); // Person对象
   alert(&#39;我叫&#39; + this.username);
  }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

• Lorsque notre fonction Person utilise ce format pour écrire des attributs et des méthodes, nous devons alors utiliser new pour donner de la valeur aux attributs et méthodes, et utiliser new pour utiliser les attributs et méthodes dans la fonction

4. apply/call

Tout d'abord, comprenons ce qu'est apply()/call() ?

apply()/call() : Enfin, la fonction est appelée, mais l'interne this pointe vers thisObj

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

Remarque :

1. Appelez la fonction function, mais celle-ci dans la fonction pointe vers thisObj (changez le pointeur interne de l'objet)

2. Si thisObj Si aucun paramètre n'est passé, la valeur par défaut est l'objet global

3 Contact et différence entre call()/apply()

Contact. : Les fonctions sont les mêmes, le premier paramètre est le même thisObj

Différence : S'il y a plus de paramètres passés

les paramètres réels de call() sont répertoriés un par un

apply() Les paramètres réels sont tous placés dans le deuxième paramètre du tableau

Un exemple de compréhension de apply()/call() :

<script>
 // apply()/call()
 function demo() {
  console.log(123);
 }

 // 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
 demo(); // 123
 demo.call(); //123
 demo.apply(); // 123
</script>

<script>
 // call()/apply()的区别：
 // call()参数单独再call中罗列
 // apply()的参数通过数组表示
 function demo(m, n, a, b) {
  alert(m + n + a + b);
 }
 demo(1, 5, 3, 4); // 13
 demo.call(null, 1, 5, 3, 4); // 13
 demo.apply(null, [1, 5, 3, 4]); // 13
</script>

Le quatrième exemple d'utilisation de ceci

<script>
 // this的第四个用法：call(obj)/apply(obj)：强制性的将this指向了obj
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 // call()/apply()：打劫式的改变了this的指向
 demo(); // zhangsan
 demo(obj1); //zhangsan
 demo(obj2); //zhangsan
 demo.call(obj1); // lisi 
 demo.apply(obj2); // wangwu
</script>

• Si vous appelez la démo directement Qu'il s'agisse d'obj1 ou d'obj2, la démo est toujours appelée par fenêtre.

• Que vous utilisiez call ou apply, l'appel final est la fonction de démonstration, mais ils la forceront à pointer vers obj1/obj2, et la forceront à pointer vers leur premier objet paramètre.

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!