Javascript ce mot-clé explication détaillée_connaissances de base

1. cela pointe vers l'objet instancié par le constructeur

Dans l'article précédent, nous avons mentionné la différence entre appeler le constructeur en utilisant new et ne pas utiliser new, comme le montre l'exemple suivant :

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
This.username = nom d'utilisateur;
This.sex = sexe;
>
var benjamin = new Benjamin("zuojj", "male");
//Sorties : Benjamin{sexe : "male", nom d'utilisateur : "zuojj">
console.log(benjamin);
var ben = Benjamin("zhangsan", "femelle");
//Sorties : non définies
console.log(ben);

Lorsque le constructeur est appelé comme une fonction normale, il n'y a pas de valeur de retour, et cela pointe vers l'objet global. Alors, comment éviter les problèmes causés par le manque de nouveaux mots clés ?

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
//Vérifie si "ceci" est un objet "Benjamin"
if(cette instance de Benjamin) {
This.username = nom d'utilisateur;
This.sex = sexe;
}autre {
Retourner le nouveau Benjamin(nom d'utilisateur, sexe);
>
>
var benjamin = new Benjamin("zuojj", "male");
//Sorties : Benjamin{sexe : "male", nom d'utilisateur : "zuojj">
console.log(benjamin);
var ben = Benjamin("zhangsan", "femelle");
//Sorties : Benjamin {nom d'utilisateur : "zhangsan", sexe : "femelle"}
console.log(ben);

Dans l'exemple ci-dessus, nous vérifions d'abord s'il s'agit d'une instance de Benjamin. Sinon, utilisez new pour appeler automatiquement le constructeur et l'instancier. Cela signifie que nous n'avons plus à nous soucier de manquer le nouveau mot-clé pour instancier le. constructeur. Bien sûr, nous pouvons développer une mauvaise habitude de cette manière. Et si nous évitions ce phénomène ? Nous pouvons générer une erreur comme celle-ci :

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
//Vérifie si "ceci" est un objet "Benjamin"
if(cette instance de Benjamin) {
This.username = nom d'utilisateur;
This.sex = sexe;
}autre {
// Sinon, renvoie une erreur.
throw new Error("`Benjamin` invoqué sans `new`");
>
>

2. cela pointe vers l'objet qui appelle la fonction

Regardez l'exemple ci-dessous :

Copier le code Le code est le suivant :

var x = 10;
var obj = {
x : 10,
sortie : fonction() {
//Sorties : vrai
console.log(this === obj);
Renvoie ceci.x;
},
innerobj : {
x : 30,
Sortie : function() {
//Sorties : vrai
console.log(this === obj.innerobj);
Renvoie ceci.x;
>
>
};
//Sorties : 10
console.log(obj.output());
//Sorties : 30
console.log(obj.innerobj.output());

3. cela pointe vers l'objet global

Lorsque nous avons discuté du constructeur ci-dessus, nous avons également expliqué que lorsque new n'est pas applicable, cela pointera vers l'objet global. Jetons un coup d'œil à deux exemples courants d'erreurs faciles :

Copier le code Le code est le suivant :

var x = 100;
var obj = {
x : 10,
sortie : fonction() {
(fonction() {
//Sorties : vrai
console.log(this === window);
//Sorties : Interne : 100
console.log("Intérieur :" this.x);
})();

Renvoie ceci.x;
>
};
//Sorties : 10
console.log(obj.output());

Lors de l'utilisation de la fermeture, la portée change et cela pointe vers la fenêtre (dans le navigateur).

Copier le code Le code est le suivant :

var x = 100;
var obj = {
x : 10,
sortie : fonction() {
Renvoie ceci.x;
>
};
var sortie = obj.output;
//Sorties : 10
console.log(obj.output());
//Sorties : 100
console.log(output());
var obj2 = {
x : 30,
sortie : obj.output
>
//Sorties : 30
console.log(obj2.output());

À ce stade, cela pointe toujours vers l'objet lorsque la fonction est appelée.

4. cela pointe vers l'objet attribué par la méthode apply/call()

Copier le code Le code est le suivant :

var x = 100;
var obj = {
x : 10,
sortie : fonction() {
Renvoie ceci.x;
>
};
//Sorties : 10
console.log(obj.output());
var obj2 = {
x : 40,
sortie : obj.output
>
//Sorties : 40
console.log(obj.output.call(obj2));
//Sorties : 10
console.log(obj2.output.apply(obj));

5. Ceci dans la fonction de rappel pointe vers l'objet pointé par this dans la fonction qui appelle le rappel

Copier le code Le code est le suivant :

//
$("#username").on("clic", function() {
console.log(this.value);
});

6. ceci

dans Function.prototype.bind

La méthode bind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a son mot-clé this défini sur la valeur fournie, avec une séquence donnée d'arguments précédant ceux fournis lorsque la nouvelle fonction est appelée.
Exemple 1 :

Copier le code Le code est le suivant :

fonction personne() {
renvoie this.name;
>
//Fonction.prototype.bind
var per = personne.bind({
nom : "zuojj"
});
console.log(per);
var obj = {
nom : "Ben",
personne : personne,
par : par
};
//Sorties : Ben, zuojj
console.log(obj.person(), obj.per());

Exemple 2 :

Copier le code Le code est le suivant :

ceci.x = 9;
var module = {
x : 81,
getX : function() { return this.x; };
//Sorties : 81
console.log(module.getX());
var getX = module.getX;
//Sorties : 9, car dans ce cas, "this" fait référence à l'objet global
console.log(getX);
// crée une nouvelle fonction avec 'this' lié au module
varboundGetX = getX.bind(module);
//Sorties : 81
console.log(boundGetX());