Une explication détaillée de ceci, les bases de JavaScript

Le this

objet de la fonction en JavaScript est le scope dans lequel la fonction est exécutée (par exemple : lors de l'appel de la fonction dans le scope global de la page web Quand, cet objet fait référence à qui est fenêtre).

Ceci en JavaScript est très différent de celui de Java et d'autres langages orientés objet Les fonctions bind(), call() et apply() sont. encore plus La flexibilité de ceci s'étend encore plus loin.

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 tomberez parfois dans des pièges inattendus. Nous résumons 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 ; ;

Global Objet)

Ouvrez le panneau de développement du Chrnavigateur Chrome (Windows : Ctrl + Sh ift + J) (Mac : Cmd + Option + J), et entrez :

console.log(this);

pour voir ce qui est sorti ?

// 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';

myName
// 输出 'Brandon'

En fait, toutes les variables définies globalement sont Lier à l'objet fenêtre. 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é (Declared Object)

Lorsque le mot-clé this est utilisé à l'intérieur d'un objet déclaré, sa valeur sera Binds à l'objet parent le plus proche de la fonction qui a appelé ceci. 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.

nouveauMot-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 cela dans l'objet de liaison 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, utilisé pour stocker les paramètres de la fonction add.

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

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

执行:

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

如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:

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

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:

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

如果我们将bindTest在控制台下打印出来，我们会看到：

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

注意：该函数已经将this绑定到large对象，并且传入了第一个参数b。所以，我们接下来是需要传入余下的参数即可：

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

箭头函数(=>)

因为需要很大的篇幅，我们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。
接下来我们来总结一下：

this的值通常是由当前函数的执行环境所决定；
在全局作用域，this指向全局对象 (window对象)；
当使用new关键字声明，this指向新建对象；
我们可以使用call(), bind(), apply()来设置this；
箭头函数不会绑定this。

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!