Parameter haben auch Gültigkeitsbereich? Komm, sieh dir diese Frage an, verstehst du wirklich?

Vorwort

Wenn eine Funktion Parameter übergibt, haben die Parameter auch einen Gültigkeitsbereich. Als ich es hörte, fand ich es unglaublich, denn im Grunde würde ich in der täglichen Entwicklung nicht auf ähnliche Codes stoßen, nur in einigen Interviewfragen.Bei dem Test geht es um das Gesamtverständnis der Funktion. Lassen Sie uns heute ausführlich über den Parameterbereich in Funktionen sprechen.

Bild.png

Beispiel

Sehen Sie sich den folgenden Code an und denken Sie über seine Ausgabe nach

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)

复制代码

Was ist Ihre Antwort, nachdem Sie es gelesen haben?

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

Der gutaussehende Typ, der richtig geantwortet hat, kann Arroganz in die Kommentare legen

Bild.png

Jedenfalls habe ich das gesehen

Bild.png

Analysieren

Lassen Sie uns zunächst verstehen, was Parameterbereich ist.
Wie wird der Parameterbereich gebildet, hat jede Funktion einen Parameterbereich?
Nein, nur wenn der Parameter einer Funktion einen Standardwert hat, bildet die Funktion einen neuen Geltungsbereich, der verwendet wird, um den Wert des Parameters zu halten . Das heißt, die Funktion hat jetzt zwei Bereiche, einen Parameterbereich und einen Funktionsrumpfbereich.
Welche Beziehung besteht also zwischen diesen beiden Bereichen?
Es ist okay, nur ein Scherz. Genau, es macht ein bisschen aus. Diese beiden Scopes sind voneinander unabhängig (keine Containment-Beziehung!!!), und die Verbindung zwischen ihnen kann nur über Parameter kommuniziert werden. Das heißt, wenn der Parameterbereich den Wert des Parameters ändert, wirkt sich dies auf die Änderung des Werts im Funktionskörperbereich aus. Das ist ein bisschen abstrakt, und wir werden es verstehen, wenn wir es durch den Code analysieren. Beachten Sie außerdem, dass der obere Bereich des Parameterbereichs und der obere Bereich des Funktionskörperbereichs identisch sind.

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) // 十

复制代码

Wie oben habe ich die Reihenfolge der Codeausführung markiert, analysieren wir sie Schritt für Schritt.
Erstens: Nachdem die Pre-Parse-Variable der Funktion heraufgestuft wurde, übergibt foo den Wert 1, um x = 1 zu ändern
. Zwei: Der Parameterbereich ist unabhängig vom Funktionskörperbereich, daher ist der Zugriff j = 'zj' in der oberen Bereichsleiste.
Drittens : Der Parameterumfang hat x Wenn nicht, wird nach bar--> window statt nach dem Umfang des foo-Funktionskörpers gesucht! Also x = 3
vier: a ist eine Pfeilfunktion, und die Pfeilfunktion zeigt auf den oberen Geltungsbereich. (Der obere Bereich des Parameterbereichs und der obere Bereich des Funktionsrumpfbereichs sind identisch.) Also dies = {name:ving} Siehe die folgende Code- und Diagrammanalyse

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

zeichnen

Bild.png

Fünf: Der Umfang des Funktionskörpers hat einen Wert x = 2
Sechs: Dasselbe wie oben k = 88
Sieben: Der Umfang des Funktionskörpers hat einen Wert, aber wenn der Prozess drei ausgeführt wird, wird j neu zugewiesen, also j = 'yy'
Acht: Dasselbe wie das vierte Beispiel, this = { name:king}
Neun: x = 0 Der erste Parameter x, der geändert wird, wenn der dritte Prozess ausgeführt wird, ist nicht das globale x, also ändert sich das globale nicht
Zehn: k = 100 Wenn der dritte Prozess ausgeführt wird , das globale k wird geändert, da der Parameterbereich kein k hat und es keinen oberen Bereich gibt, nur k im Fenster der obersten Ebene kann gefunden werden

Ende

Es ist vorbei, ich verstehe!

Bild.png

Die wichtigsten Punkte dieser Art von Thema in einer einfachen Zusammenfassung:
1. Der Parameterbereich und der Funktionskörperbereich sind unabhängig voneinander, aber ihr übergeordneter Bereich ist derselbe.
2. this zeigt auf: this in der Pfeilfunktion im Parameterbereich zeigt auf seinen vorherigen Bereich, der sein eigener this ist

Denken Sie an diese beiden Punkte, in Zukunft werden ähnliche Fragen die Suppe statt der Medizin verändern.
Gib ein Like! Yanzu

Bild.png

Ich denke du magst

Origin juejin.im/post/7079266572115640357
Empfohlen
Rangfolge