const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
En JavaScript, le mot clé this
fait référence à un objet.
Quel objet dépend de la façon dont ce
est invoqué (utilisé ou appelé).
Le mot-clé this
fait référence à différents objets selon la façon dont il est utilisé :
Dans une méthode objet, this
fait référence à l'objet.
Seul, this
fait référence à l'objet global.
Dans une fonction, this
fait référence à l'objet global.
Dans une fonction, en mode strict, ce
est non défini
.
Dans un événement, this
fait référence à l'élément qui a reçu l'événement.
Des méthodes telles que call()
, apply()
et bind()
peut faire référence à ce
à n'importe quel objet.
ce
n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this
.
Lorsqu'il est utilisé dans une méthode objet, this
fait référence à l'objet.
Dans l'exemple en haut de cette page, this
fait référence à l'objet person.
Parce que la méthode fullName est une méthode de l'objet person.
fullName : function() {
return this.firstName + " " + this.lastName;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
Lorsqu'il est utilisé seul, this
fait référence à l'objet global.
Parce que ce
s'exécute dans la portée globale.
Dans une fenêtre de navigateur, l'objet global est [object Window]
:
let x = this;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>
<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
En mode strict, lorsqu'il est utilisé seul, this
fait également référence à l'objet global :
"use strict";
let x = this;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>
<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Dans une fonction, l'objet global est la liaison par défaut pour ce
.
Dans une fenêtre de navigateur, l'objet global est [object Window]
:
function myFunction() {
return this;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
Le mode strict de JavaScript n'autorise pas la liaison par défaut.
Ainsi, lorsqu'il est utilisé dans une fonction, en mode strict, ce
est non défini
.
"use strict";
function myFunction() {
return this;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In a function, by default, <b>this</b> refers to the global object.</p>
<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
Dans les gestionnaires d'événements HTML, this
fait référence à l'élément HTML qui a reçu le événement:
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<button onclick="this.style.display='none'">Click to Remove Me!</button>
</body>
</html>
Dans ces exemples, ce
est l'objet personne :
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>
</body>
</html>
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
c'est-à-dire que this.firstName est la propriété firstName de this (l'objet personne).
Les méthodes call()
et apply()
sont des méthodes JavaScript prédéfinies.
Ils peuvent tous deux être utilisés pour appeler une méthode objet avec un autre objet comme argument.
La méthode appel de fonction()
La méthode Function apply()
La méthode Function bind()
L'exemple ci-dessous appelle person1.fullName avec person2 comme argument, this fait référence à person2, même si fullName est une méthode de person1 :
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Return "John Doe":
person1.fullName.call(person2);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>
<p id="demo"></p>
<script>
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
let x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Avec la méthode bind()
, un objet peut emprunter une méthode à un autre objet.
Cet exemple crée 2 objets (personne et membre).
L'objet membre emprunte la méthode fullname à l'objet personne :
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
Pour déterminer à quel objet ce
fait référence ; utilisez la priorité d’ordre suivante.
Objet
lier()
appliquer() et appeler()
Méthode objet
Portée mondiale
Est-ce que this
dans une fonction appelée à l'aide de bind() ?
Est-ce que this
dans une fonction appelée à l'aide de apply() ?
Est-ce que this
est dans une fonction appelée à l'aide de call() ?
Est-ce que this
est dans une fonction objet (méthode) ? <p>Est-ce que ce
est dans une fonction dans la portée globale.