Voici quelques façons d'accéder au contexte parent dans le contexte enfant - H2>

1. Vous pouvez utiliser la fonction绑定 a>().
2. Stockez une référence à context/this dans une autre variable (voir exemple ci-dessous).
3. Utilise la fonctionnalité ES6flèches.
4. Changer le code, la conception fonctionnelle et l'architecture - pour cela, vous devez maîtriser lesDesign Patterns a> en JavaScript.

1.Utilisez labind()fonction

function MyConstructor(data, transport) { this.data = data; transport.on('data', ( function () { alert(this.data); }).bind(this) ); } // Mock transport object var transport = { on: function(event, callback) { setTimeout(callback, 1000); } }; // called as var obj = new MyConstructor('foo', transport);

Si vous utilisez Underscore.js -http://underscorejs.org/#bind

transport.on('data', _.bind(function () { alert(this.data); }, this));

2. Stockez la référence au contexte/this dans une autre variable

function MyConstructor(data, transport) { var self = this; this.data = data; transport.on('data', function() { alert(self.data); }); }

3.Fonction flèche

function MyConstructor(data, transport) { this.data = data; transport.on('data', () => { alert(this.data); }); }

À propos此内容您应该了解

this(alias "contexte") est un mot-clé spécial dans chaque fonction dont la valeur dépend uniquement decommentla fonction est appelée, et non de comment/quand/où elle est définie. Elle n'est pas affectée par la portée lexicale comme les autres variables (sauf les fonctions fléchées, voir ci-dessous). Voici quelques exemples :

function foo() { console.log(this); } // normal function call foo(); // `this` will refer to `window` // as object method var obj = {bar: foo}; obj.bar(); // `this` will refer to `obj` // as constructor function new foo(); // `this` will refer to an object that inherits from `foo.prototype`

Pour en savoir plus sur此, consultez laDocumentation MDN.

---

Comment citer correctementthis

Utilisez lesfonctions fléchées

ECMAScript 6 introduit desfonctions fléchées, qui peuvent être considérées comme des fonctions lambda. Ils n'ont pas leur propre reliurethis绑定。相反，this就像普通变量一样在范围内查找。这意味着您不必调用.bind. Au lieu de cela,

est recherché dans la portée, tout comme une variable normale. Cela signifie que vous n'avez pas besoin d'appeler .bind. Ce n'est pas leur seul comportement spécial, consultez la documentation MDN pour plus d'informations.

function MyConstructor(data, transport) { this.data = data; transport.on('data', () => alert(this.data)); }

这个Ne pas utiliser

this，而是访问它引用的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。变量可以有任何名称，但常见的是self和thatVous ne souhaitez pas réellement accéder à

spécifiquement, mais

accéder à l'objet auquel il fait référenceself是一个普通变量，因此它遵循词法范围规则并且可以在回调内部访问。这还有一个优点，即您可以访问回调本身的this. C'est pourquoi une solution simple consiste simplement à créer une nouvelle variable qui fait également référence à l'objet. Les variables peuvent avoir n'importe quel nom, mais les plus courants sontselfetthat.

function MyConstructor(data, transport) { this.data = data; var self = this; transport.on('data', function() { alert(self.data); }); }

Puisqueselfest une variable normale, elle suit les règles de portée lexicale et est accessible dans le rappel. Cela présente également l'avantage que vous pouvez accéder à la valeurthisdu rappel lui-même.

Définition explicite des rappelsthis- Partie 1

Il peut sembler que vous n'avez aucun contrôle sur la valeur depuisque sa valeur est définie automatiquement, mais ce n'est pas réellement le cas..bind^[docs]，它返回一个新函数，其中this绑定到一个值。该函数与您调用.bind的函数具有完全相同的行为，只是this是由您设置的。无论何时或如何调用该函数，this

Chaque fonction a la méthode

.bindthis绑定到MyConstructor的this

[docs]

, qui renvoie une nouvelle fonction oùest lié à une valeur. Cette fonction a exactement le même comportement que la fonction que vous appelez.bind, sauf que lejQuery .proxyest défini par vous. Peu importe quand et comment la fonction est appelée,fera toujours référence à la valeur transmise.

function MyConstructor(data, transport) { this.data = data; var boundFunction = (function() { // parenthesis are not necessary alert(this.data); // but might improve readability }).bind(this); //

Dans cet exemple, nous lions lesdu rappel à la valeur desde MyConstructor.

Remarque : Lors de la liaison du contexte à jQuery, utilisez plutôt [docs]. La raison en est que vous n'avez pas besoin de stocker une référence à la fonction lors de la dissociation du rappel d'événement. jQuery gère cela en interne.

Configuration des rappelsthis- Partie 2

Certaines fonctions/méthodes qui acceptent un rappel acceptent également une valeur à laquelle le rappelthis应该引用的值。这与您自己绑定它基本上相同，但是函数/方法会为您完成它。Array#mapdoit faire référence. C'est fondamentalement la même chose que de le lier vous-même, mais la fonction/méthode le fait pour vous.Array#map^[docs]C'est la méthode. Sa signature est :

array.map(callback[, thisArg])

Le premier paramètre est le rappel et le deuxième paramètre est la valeurthisdoit faire référence. Voici un exemple artificiel :

var arr = [1, 2, 3]; var obj = {multiplier: 42}; var new_arr = arr.map(function(v) { return v * this.multiplier; }, obj); //
Remarque : la question de savoir sipeut recevoir une valeur pourthis传递值通常在该函数/方法的文档中提到。例如，jQuery 的$.ajax方法[docs]描述了一个名为contextest généralement mentionnée dans la documentation de cette fonction/méthode. Par exemple, lala méthode$.ajaxde jQuery
[docs]
           
décrit une option appeléecontext:
FAQ : Utiliser des méthodes d'objet comme rappels/gestionnaires d'événements
Une autre manifestation courante de ce problème est lorsqu'une méthode objet est utilisée comme gestionnaire de rappel/d'événement. Les fonctions sont des citoyens de première classe en JavaScript, et le terme « méthode » n'est qu'un terme familier désignant une fonction, qui est la valeur de la propriété d'un objet. Mais la fonction n'a pas de lien spécifique vers son objet "contenant".this.method被指定为点击事件处理程序，但如果点击document.body，记录的值将是未定义，因为在事件处理程序中，this引用的是document.body，而不是Foo
Considérons l'exemple suivant :this
function Foo() { this.data = 42, document.body.onclick = this.method; } Foo.prototype.method = function() { console.log(this.data); };
La fonctionthis.methodest spécifiée comme gestionnaire d'événements de clic, mais si l'on clique surdocument.body, la valeur enregistrée seranon définiecar Dans le gestionnaire d'événements,fait référence àdocument.body, et non à l'instance deFoo.Comme déjà mentionné au début, ce à quoifait référence dépend de la façon dont la fonction
est appelée , et non de la façon dont
est défini.Il pourrait être plus évident que la fonction n'a aucune référence implicite à l'objet si le code ressemble à ceci :.bind将this
function method() { console.log(this.data); } function Foo() { this.data = 42, document.body.onclick = this.method; } Foo.prototype.method = method;
La solutionthisest la même que celle mentionnée ci-dessus : utilisez.bindpour lier explicitement
à une valeur spécifique
si disponible
document.body.onclick = this.method.bind(this);
Ou appelez explicitement la fonction en tant que "méthode" de l'objet en utilisant une fonction anonyme comme gestionnaire de rappel/événement et affectez l'objet () à une autre variable :
var self = this; document.body.onclick = function() { self.method(); };
ou utilisez la fonction flèche :
document.body.onclick = () => this.method();