Maison >interface Web >js tutoriel >Résumé de l'appel de méthode et du déclenchement de méthode dans les connaissances JavaScript_Basic

Résumé de l'appel de méthode et du déclenchement de méthode dans les connaissances JavaScript_Basic

WBOYoriginal: 2016-05-16 15:07:591294parcourir

En js, le mot-clé this est une chose intéressante, mais sa direction déroute souvent les débutants.

En fait, pour comprendre ce mot-clé, deux questions doivent être clarifiées - "l'appel de méthode et le déclenchement de méthode"

Regardons maintenant un morceau de code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>function</title>
<script>
function showThis(){
  console.info(this);
}
  
function Test1(){
  this.f=showThis;
}
function Test2(){
  this.f=function(){
    showThis();
  }
}

showThis();//window
new Test1().f();//Test1  
new Test2().f();//window
</script>
</head>
<body>
</body>
</html>

La ligne 20 imprime l'objet fenêtre, ce qui est facile à comprendre, mais la ligne 21 imprime l'objet instance de Test1, tandis que la ligne 22 imprime l'objet fenêtre. En regardant la construction de Test1 et Test2, nous avons constaté que la méthode f exécutait finalement la méthode showThis. Mais ce point de showThis est différent. En effet, la méthode f dans Test1 pointe directement vers showThis, new Test1().f() appelle directement la méthode showThis avec l'instance de Test1 et l'appelant est l'instance de Test1. Et new Test2().f() déclenche la méthode showThis de l'objet window dans la méthode d'instance f de Test2, où elle pointe vers la fenêtre de l'appelant plutôt que vers l'instance du déclencheur Test2.

Vous pouvez le trouver dès maintenant. cela pointe vers l'appelant et le déclencheur pousse simplement l'appelant à exécuter la méthode spécifiée.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Effet d'horloge de dessin sur toile JavaScript html5 (2)_compétences javascriptArticle suivant：Effet d'horloge de dessin sur toile JavaScript html5 (2)_compétences javascript

Articles Liés

Voir plus