Les paramètres ont également une portée ? Venez voir cette question, comprenez-vous vraiment?

avant-propos

Lorsqu'une fonction transmet des paramètres, les paramètres ont également une portée. L'avez-vous rencontré ? Quand je l'ai entendu, j'ai pensé que c'était incroyable, car fondamentalement, je ne rencontrerais pas de codes similaires dans le développement quotidien, seulement dans certaines questions d'entretien.Le test porte sur la compréhension globale de la fonction. Aujourd'hui, parlons en détail de la portée des paramètres dans les fonctions.

Exemple

Regardez le code ci-dessous et réfléchissez à sa sortie

var x = 0
var k = 99
function bar(s = () => { console.log(this); }) {
  var j = 'zj'
  function foo(x,
    y = function () { x = 3; k = 100; j = 'yy'; console.log(x); },
    a = () => { console.log(this); }
  ) {
    console.log(x)
    var x = 2
    var k = 88
    console.log(j);
    y()
    a()
    console.log(x)
    console.log(k)
  }

  foo.call({ name: 'ving' }, 1)
  console.log(j);
  s()
}
bar.call({ name: 'king' })
console.log(x)
console.log(k)

复制代码

Après lecture, quelle est votre réponse ?

// 1
// zj
// 3
// {name:ving}
// 2
// 88
// yy 
// {name:king}
// 0
// 100
复制代码

Le beau mec qui a répondu correctement peut mettre de l'arrogance dans les commentaires

En tout cas c'est ce que j'ai vu

Analyser

Commençons par comprendre ce qu'est la portée des paramètres ?
Comment la portée des paramètres est-elle formée, chaque fonction a-t-elle une portée de paramètre ?
Non, uniquement lorsque le paramètre d'une fonction a une valeur par défaut, la fonction forme une nouvelle portée, qui est utilisée pour contenir la valeur du paramètre . Autrement dit, la fonction a maintenant deux portées, une portée de paramètre et une portée de corps de fonction.
Quelle est donc la relation entre ces deux périmètres ?
C'est bon, je plaisante. Justement ça compte un peu. Ces deux portées sont indépendantes l'une de l'autre (pas de relation de confinement !!!), et la connexion entre elles ne peut être communiquée qu'à travers des paramètres. C'est-à-dire que lorsque la portée du paramètre change la valeur du paramètre, cela affectera la modification de la valeur dans la portée du corps de la fonction. C'est un peu abstrait, et nous le comprendrons lorsque nous l'analyserons à travers le code. Une autre chose à noter est que la portée supérieure de la portée du paramètre et la portée supérieure de la portée du corps de la fonction sont les mêmes.

var x = 0
var k = 99
function bar(s = () => { console.log(this); // 八 }) {
  var j = 'zj'
  function foo(x,
    y = function () { x = 3; k = 100; j = 'yy'; console.log(x); // 三 },
    a = () => { console.log(this);// 四 }
  ) {
    console.log(x) // 一
    var x = 2
    var k = 88
    console.log(j); // 二
    y()
    a()
    console.log(x) // 五
    console.log(k) // 六
  }

  foo.call({ name: 'ving' }, 1)
  console.log(j); // 七
  s()
}
bar.call({ name: 'king' })
console.log(x) // 九
console.log(k) // 十

复制代码

Comme ci-dessus, j'ai marqué l'ordre d'exécution du code, analysons-le étape par étape.
Un : après la promotion de la variable de pré-analyse de la fonction, foo passe la valeur 1 pour changer x = 1
Deux : la portée du paramètre est indépendante de la portée du corps de la fonction, donc l'accès est j = 'zj' dans la barre de portée supérieure
Troisième : Le paramètre scope a x Sinon, il recherchera bar--> window au lieu de la portée du corps de la fonction foo ! Donc x = 3
quatre : a est une fonction fléchée, et la fonction fléchée pointe vers la portée supérieure. (La portée supérieure de la portée du paramètre et la portée supérieure de la portée du corps de la fonction sont les mêmes) Donc this = {name:ving} Voir l'analyse de code et de diagramme suivante

function bar(s = () => {  console.log(this); // { name: 'king' } }) {
  const jj = () => {
    console.log(this); // { name: 'king' }
  }
  jj()
  s()
}
bar.call({ name: 'king' })
复制代码

dessiner

Cinq : la portée du corps de la fonction a une valeur x = 2
Six : comme ci-dessus k = 88
Sept : la portée du corps de la fonction a une valeur mais lorsque le processus trois est exécuté, j est réaffecté donc j = 'yy'
Huit : comme le quatrième exemple, this = { name:king}
Neuf : x = 0 Le premier paramètre x modifié lorsque le troisième processus est exécuté n'est pas le global x, donc le global ne change pas
Dix : k = 100 Lorsque le troisième processus est exécuté , le k global est modifié car la portée du paramètre n'a pas k et il n'y a pas de portée supérieure, seul k dans la fenêtre de niveau supérieur peut être trouvé

finir

C'est fini, j'ai compris !

Les points clés de ce type de sujet sous un simple résumé :
1. La portée du paramètre et la portée du corps de la fonction sont indépendantes l'une de l'autre mais leur portée de niveau supérieur est la même.
2. this pointe vers : this dans la fonction fléchée de la portée du paramètre pointe vers sa portée précédente, qui est la sienne this

Rappelez-vous ces deux points, à l'avenir, des questions similaires changeront la soupe au lieu du médicament.
Donnez-lui un j'aime! Yanzu