Réponse détaillée à cette question en JavaScript (tutoriel graphique)

L'objet this d'une fonction en JavaScript est la portée dans laquelle la fonction est exécutée (par exemple : lorsqu'une fonction est appelée dans la portée globale d'une page web, l'objet this fait référence à la fenêtre).

Ceci en JavaScript est très différent de celui des langages orientés objet tels que Java. Les fonctions bind(), call() et apply() en étendent encore la flexibilité.

Pour garantir la lisibilité, cet article utilise une traduction libre plutôt qu'une traduction littérale. De plus, les droits d'auteur de cet article appartiennent à l'auteur original et la traduction est uniquement destinée à l'apprentissage.

Si vous ne comprenez pas suffisamment le mot-clé JavaScript, vous risquez parfois de tomber dans des pièges inattendus. Nous avons résumé ici 5 règles générales pour vous aider à déterminer à quoi cela correspond réellement. Bien que toutes les situations ne soient pas couvertes, la plupart des situations quotidiennes peuvent être correctement déduites à l’aide de ces règles.

La valeur de this est généralement déterminée par l'environnement d'exécution de la fonction, ce qui signifie qu'elle dépend de la façon dont la fonction est appelée
Chaque fois que la même fonction est appelée, cela peut pointer vers un objet différent ; ;

Objet global

Ouvrez le panneau de développement Chrome (Windows : Ctrl + Maj + J) (Mac : Cmd + Option + J) et saisissez :

console.log(this);

et voir quelle est la sortie ?

// Window {}

objet fenêtre ! Parce que dans la portée globale, cela pointe vers l'objet global. L'objet global dans le navigateur est l'objet window.
Pour vous permettre de mieux comprendre pourquoi cela pointe vers l'objet window, regardons un autre exemple :

var myName = 'Brandon';
Nous pouvons accéder à sa valeur en tapant monNom dans la console :

myName
// 输出 'Brandon'

En fait, toutes les variables définies globalement sont liées à l'objet window. Faisons le test suivant :

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

Maintenant, mettons ceci dans la fonction et voyons quel est l'effet.

function test(){
 return this;
}
test();

Vous constaterez que cela pointe toujours vers l'objet fenêtre global. Étant donné que le mot-clé this ne se trouve pas dans un objet déclaré, il s'agit par défaut de l'objet window global. Cela peut être un peu difficile à comprendre pour la plupart des débutants. Après avoir lu cet article, vous comprendrez soudain.
Remarque : si vous êtes en mode strcit, ceci n'est pas défini dans l'exemple ci-dessus.

Objet déclaré

Lorsque le mot-clé this est utilisé à l'intérieur d'un objet déclaré, sa valeur sera liée à la fonction la plus proche qui appelle cet objet parent. Utilisons un exemple pour illustrer ce problème :

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

Si ceci est utilisé dans la fonction complète de l'objet déclaré personne, alors l'objet parent le plus proche de la fonction complète qui appelle ceci est personne, donc cela pointe à personne.

Afin de mieux décrire que cela pointe réellement vers l'objet personne, vous pouvez copier le code suivant dans la console du navigateur et l'imprimer.

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

Regardons un exemple plus complexe :

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

Ici, nous avons des objets imbriqués. À ce moment-là, vers qui pointe-t-il ? Imprimons-le et jetons un coup d'oeil :

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

Vous constaterez que les règles que nous avons décrites plus tôt sont respectées : sa valeur sera liée à l'objet parent le plus proche de la fonction qui l'appelle.

nouveau mot-clé

Lorsque vous utilisez le nouveau mot-clé pour construire un nouvel objet, celui-ci sera lié au nouvel objet. Regardons un exemple :

function Car(make, model) {
 this.make = make;
 this.model = model;
};

Sur la base de la première règle, vous pourriez en déduire que cela pointe vers l'objet global. Mais si nous utilisons le mot-clé new pour déclarer une nouvelle variable, celle-ci dans la fonction Car sera liée à un nouvel objet vide, puis les valeurs de this.make et this.model seront initialisées.

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

appeler, lier et appliquer

Nous pouvons définir explicitement l'objet de liaison de ceci dans call(), bind(), apply() . Ces trois fonctions sont très similaires, mais il faut prêter attention à leurs subtiles différences.

fdd4833ab5e3c4d7d195a30d147495df

Regardons un exemple :

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

La fonction d'ajout génère NaN car this.a et this.b ne sont pas définis.

Maintenant, nous introduisons l'objet et utilisons call() et apply() pour appeler :

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

Lorsque nous utilisons add.call(), le premier paramètre est celui-ci qui doit être objet lié, et le reste sont les paramètres d'origine de la fonction add.
Par conséquent, this.a pointe vers dix.a, et this.b pointe vers dix.b. add.apply() est similaire, sauf que le deuxième paramètre est un tableau pour stocker les paramètres de la fonction add.

La fonction bind() est similaire à call(), mais la fonction bind() ne sera pas appelée immédiatement. La fonction bind() renvoie une fonction et la lie. Ensuite, utilisons des exemples pour aider à comprendre les scénarios d'application de la fonction bind() :

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

Exécution :

small.go(2, 3, 4);
// 输出 10

Si nous voulons utiliser la valeur de large.a à la place de petit .a ? Nous pouvons utiliser call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

Cependant, que devons-nous faire si nous ne savons pas encore quelles valeurs​​doivent être transmises pour ces trois paramètres ? Nous pouvons utiliser bind :

var bindTest = small.go.bind(large, 2);

Si nous imprimons bindTest sous la console, nous verrons :

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

Remarque : Cette fonction a Lier ceci au gros objet et passez le premier paramètre b. Par conséquent, nous devons ensuite transmettre les paramètres restants :

bindTest(3, 4);
// 输出 109

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Le pointage de this en JS et les fonctions d'appel et d'application (tutoriel image et texte)

this et le rôle de call et apply_Basic knowledge

La différence entre self, static, $this en PHP et explication détaillée de reliure statique tardive

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!