JavaScript ceci


Table des matières

    Afficher la table des matières


Exemple

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>

Qu'est-ce que ce ?

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.

Note

ce n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.


ce dans une méthode

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>

ce seul

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] :

Exemple

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 :

Exemple

 "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>

ce dans une fonction (par défaut)

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] :

Exemple

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>


ce dans une fonction (stricte)

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.

Exemple

"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>

ce dans les gestionnaires d'événements

Dans les gestionnaires d'événements HTML, this fait référence à l'élément HTML qui a reçu le événement:

Exemple

 <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>

Liaison de méthode objet

Dans ces exemples, ce est l'objet personne :

Exemple

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>

Exemple

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).


Liaison de fonction explicite

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.

Voir également:

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 :

Exemple

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>



Emprunt de fonction

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 :

Exemple

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>

Cette priorité

Pour déterminer à quel objet ce fait référence ; utilisez la priorité d’ordre suivante.

Precedence

Objet

1

lier()

2

appliquer() et appeler()

3

Méthode objet

4

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.