Comment l'utiliser en js

Qu'est-ce que cela signifie en js ?

Ceci est toujours utilisé en JS. Aujourd'hui, je vais vous parler de ce qui peut facilement dérouter les gens et comment l'utiliser

. cela pointe vers 1, et la fonction ordinaire pointe vers l'appelant de la fonction : un moyen simple est de voir s'il y a un point devant la fonction. Si c'est le cas, pointez sur la valeur dans. devant le point ; 2. La fonction flèche pointe vers le domaine où la fonction est utilisée : Faites attention à comprendre la portée. Seul le {} de la fonction constitue la portée du <.> object ne constitue pas la portée

const obj = {
name: 'objName',
say() {
console.log(this.name);  
      }, 
read: () => {
     console.log(this.name);
             }
       }
obj.say(); // objName
obj.read(); // undefined

Fonction ordinaire, l'appelant est obj, donc le résultat est objname, comprenez également que say() ; est une fonction ordinaire, avec un point devant, donc cela pointe vers la fonction obj;

Flèche, cela pointe vers la portée où se trouve la fonction. La portée actuelle est l'environnement global, donc this.name est. undefined.

Prenons l'exemple suivant pour comprendre plus clairement où pointe la fonction flèche. La portée est la fonction ordinaire say, et l'appelant de say() est obj

<🎜. >

const obj = { 
say: function () {
  setTimeout(() => {
   console.log(this)
                  });
                 }
             }

obj.say(); // obj, ceci fait référence à C'est obj qui le définit

Points de connaissances supplémentaires

La valeur par défaut du navigateur est window

test( //window

function test() {  
console.log(this);
}

<🎜); >
node.js

La valeur par défaut this dans l'environnement global est {}, et la valeur par défaut this dans les fonctions ordinaires est globale

console.log(this); // {}
function test() {
 console.log(this);
}
test(); //global

Prenez deux questions pour vérifier si vous la maîtrisez

exemple1

Sortie 10, 2

const length = 10;
function fn() {
console.log(this.length);
}
const  obj = {
  length: 5,
  method: function(fn) { 
  fn();
  arguments[0]();   
  }
};
obj.method(fn, 1);

J'étais confus quand j'ai vu cette question pour la première fois, mais maintenant je la comprends enfin . La fonction méthode passe deux paramètres, un paramètre est fn(), fn() est une fonction ordinaire, et cela pointe vers la fonction L'appelant pointe vers le monde global à ce moment (vous pouvez également voir qu'il n'y a pas de point). devant cette fonction), donc le résultat courant est 10. les arguments sont tous des paramètres de la fonction, qui est un objet de classe

array

, arguments[0] () , peuvent être considérés comme des arguments.0 (), la fonction est appelée par des arguments, à ce moment cela fait référence aux arguments, this.length est angument.length, qui est le nombre total de paramètres passés dans 2

Remarque : le résultat de l'exécution de l'exemple ci-dessus dans l'environnement de nœud est indéfini 2, const length = 10 est remplacé par global.length = 10 car l'environnement de nœud définit la
variable globale

Elle ne sera pas liée ; à global, et le navigateur se liera automatiquement à la fenêtre de l'environnement global

Quel sera le résultat s'il est modifié comme suit ?

const length = 10;
function fn() {
    console.log(this.length);
}
const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};
obj.method(fn, 1);
10, 10
example 2
window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8

C'est un peu alambiqué, mais c'est facile à comprendre si vous l'analysez étape par étape :

obj.dbl(); Lors de l'exécution de cette ligne de code, this fait référence à obj, donc this.val = = = obj.val*=2, le résultat final est 4, val*=2 === window.val *= 2, le résultat final est 2

func(), lors de l'exécution de cette ligne de code , func() Sans aucun préfixe, this fait référence à window.func(); donc à ce moment la valeur de this est window, this.val === window.val *= 2, à ce moment window.val est 4, val*=2 === window.val *2, le résultat final est 8. Enfin, console.log(this.val) et console.log(val) font référence à window.val.

Ce qui précède est ma petite compréhension de cela. Si vous avez des questions sur mon article, n'hésitez pas à communiquer avec moi.

Recommandations associées :

Comment comprendre les bases de JavaScript orientées objet et ces problèmes de pointage

Explication détaillée de la différence entre ceci et événement en JS

Introduction à cela, postuler, appeler et lier en JS

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!