Maison > interface Web > js tutoriel > Qu'est-ce que c'est exactement dans les compétences JavaScript (1)_javascript

Qu'est-ce que c'est exactement dans les compétences JavaScript (1)_javascript

WBOY
Libérer: 2016-05-16 15:26:57
original
1463 Les gens l'ont consulté

Pour les programmeurs qui utilisent C, C#, Java et d'autres langages orientés objet toute l'année, ils sont confrontés à cela presque tous les jours. Dans ces langages, la signification de ceci est très claire, c'est-à-dire qu'il pointe vers l'instance d'objet actuelle et que nous pouvons l'utiliser en toute confiance. Cependant, en JavaScript, un langage dynamique, la méthode d'écriture de ceci n'a pas changé, mais sa signification est très différente. Voici un exemple, utilisant le navigateur Firefox14.0.1.

.

Tout d'abord, Bonjour tout le monde o(^▽^)o

Cela fait plus d'un an que j'ai commencé à apprendre automatiquement JavaScript, un langage de programmation flexible.

En plus d'un an, ce langage m'a apporté non seulement des retours sur investissement élevés, mais aussi de nombreuses surprises inattendues, me permettant, à moi, étudiant en art, d'apprécier le charme de la programmation.

À partir d'aujourd'hui, je vais mettre à jour mon blog tous les lundis, non seulement pour partager, mais aussi pour m'encourager.

OK, entrons dans le sujet d'aujourd'hui. Aujourd'hui, nous allons parler d'un objet spécial en javascript : ceci

Les amis qui ont été exposés à d'autres langages de programmation orientés objet​​(tels que : java, C, C, etc.) le connaissent peut-être très bien.

Mais pourquoi cela nous pose-t-il souvent beaucoup de problèmes en javascript ?

Parlons d'abord de ses différences avec les autres langages de programmation

En JavaScript, il s'agit d'un objet spécial contrairement à d'autres langages de programmation, il s'agit d'une valeur stockée dans une instance et pointe directement vers cette instance.

Mais en tant que pointeur distinct, pointant vers différents endroits dans différentes circonstances, c'est pourquoi nous le confondons.

Jetons un coup d'oeil à quelles formes cela ressemble dans différentes circonstances

1. Dans une portée globale :

Ceci est mieux compris, c'est-à-dire que dans la portée globale, ceci pointe vers window, c'est-à-dire que dans la portée globale, this et window sont équivalents :

console.log(this === window); //true
Copier après la connexion

De plus, comme cela équivaut à window à ce moment, les variables que nous déclarons dans la portée globale pointeront également vers ceci :

var x = 1;
console.log(this.x);//1
console.log(window.x);//1
Copier après la connexion

Bien sûr, nous avons une autre façon de déclarer des variables :

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1
Copier après la connexion

Lors de la déclaration d'une variable sans utiliser var ou let, cela équivaut à ajouter ou à modifier la valeur de l'attribut global this

Cela semble très simple, n'est-ce pas juste un objet équivalent à une fenêtre ?

Bien sûr, si c’était tout, cela n’aurait peut-être même pas besoin d’exister.

La partie la plus gênante est qu'il a des formes complètement différentes dans différentes portées

2. En fonction :

Au moment où nous arrivons ici, ce piège s'est progressivement révélé

Pourquoi dit-on ici que c'est dans une fonction plutôt que dans un périmètre local ? Pour parler de cela, il faut d'abord comprendre ce qu'est une fonction

En javascript, la fonction est un objet spécial en js : function, qui a différentes formes

Ce que l'on voit habituellement :

function set(){
  var x = 0;
};
Copier après la connexion

Sous cette forme, la portée interne est la même que la portée globale, pointant directement vers la fenêtre, donc sa forme est toujours équivalente à celle d'une fenêtre.

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1
Copier après la connexion

Il est souvent facile de faire des erreurs ici. Beaucoup de gens pensent que lorsque cela est déjà dans une fonction, son emplacement actuel est la portée locale actuelle, il devrait donc pointer vers cette fonction

Cependant, si vous instanciez cette fonction (nouvelle), cette fonction générera un tout nouvel environnement, et celui-ci dans ce cas changera également en conséquence, et pointera vers l'instance où elle se trouve.

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1


Copier après la connexion

En effet, après l'instanciation, cette fonction devient un objet instance, et le this à l'intérieur pointe naturellement vers cet objet instance, tout comme le this au début pointe vers l'objet window, il pointe vers l'endroit où il se trouve. de

De plus, lorsque nous écrivons du javascript, nous avons généralement un moyen d'appeler des fonctions, qui consiste à lier des événements à des éléments, tels que button.addEventListener('click', fn, false), etc., si nécessaire dans fn Si ceci est utilisé, cela pointe vers l'élément de traitement d'événement, qui est le bouton

Remarque : il s'agit d'un mot-clé, vous ne pouvez pas l'écraser.

Inconsciemment, j'ai écrit beaucoup mieux. En fait, cela a plus de formulaires, comme le prototype, comme en HTML, comme dans le gestionnaire d'événements DOM. En raison de la longueur, je ne continuerai pas ici. j'en parlerai
en prototype

À mon sens, il s'agit d'un indicateur, et par conséquent il aura une position plus importante dans la chaîne des prototypes, mais ce n'est pas dans notre cadre aujourd'hui, donc je ne l'expliquerai pas trop pour l'instant

À partir de maintenant, je mettrai à jour essentiellement tous les lundis. En tant que débutant en JavaScript, j'espère également que ce que j'écris pourra être partagé avec plus de personnes, et j'espère résumer plus d'expériences issues des pensées de chacun !

Concernant ce que c'est exactement en JavaScript (1), je le mettrai à jour tous les lundis. En tant que débutant en JavaScript, j'espère que ce que j'écris pourra être partagé avec des amis autour de moi, et j'espère échanger des expériences d'apprentissage avec chacun. autre. Merci!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal