Javascript-Funktion scoping und hoisting

Question

Ich habe gerade einen tollen Artikel gelesen über JavaScript-Scoping und Heben von Ben Cherry in dem er das folgende Beispiel anführt:

var a = 1;

function b() {
    a = 10;
    return;

    function a() {}
}
b();
alert(a);

Bei Verwendung des obigen Codes meldet der Browser "1".

Ich bin mir immer noch nicht sicher, warum er eine "1" zurückgibt. Einige der Dinge, die er sagt, kommen mir in den Sinn wie: Alle Funktionsdeklarationen werden nach oben gehievt. Man kann eine Variable mit einer Funktion in den Gültigkeitsbereich bringen. Trotzdem verstehe ich es nicht.

Answer 1

function a() { } ist eine Funktionsanweisung, die eine a Variable lokal in der b Funktion.
Variablen werden erstellt, wenn eine Funktion geparst wird, unabhängig davon, ob die var oder Funktionsanweisung ausgeführt wird.

a = 10 setzt diese lokale Variable.

Answer 2

Worum geht es in diesem kleinen Codeschnipsel?

Fall 1:

einbeziehen. function a(){} Definition innerhalb des Körpers von function b wie folgt. logs value of a = 1

var a = 1;
function b() {
  a = 10;
  return;

  function a() {}
}
b();
console.log(a); // logs a = 1

Fall 2

Ausgeschlossen sind function a(){} Definition innerhalb des Körpers von function b wie folgt. logs value of a = 10

var a = 1;
function b() {
  a = 10;  // overwrites the value of global 'var a'
  return;
}
b();
console.log(a); // logs a = 10

Die Beobachtung wird Ihnen helfen, diese Aussage zu realisieren console.log(a) protokolliert die folgenden Werte.

Fall 1 : a = 1

Fall 2 : a = 10

Stellungen

1. var a wurde lexikalisch im globalen Bereich definiert und deklariert.
2. a=10 Diese Anweisung weist den Wert 10 neu zu, sie befindet sich lexikalisch innerhalb der Funktion b.

Erläuterung der beiden Fälle

Wegen der function definition with name property a ist gleich dem variable a . Die variable a innerhalb der function body b wird zu einer lokalen Variablen. Die vorherige Zeile bedeutet, dass der globale Wert von a erhalten bleibt und der lokale Wert von a auf 10 aktualisiert wird.

Was wir also sagen wollen, ist, dass der folgende Code

var a = 1;
function b() {
  a = 10;
  return;

  function a() {}
}
b();
console.log(a); // logs a = 1

Er wird vom JS-Interpreter wie folgt interpretiert.

var a = 1;
function b() {
  function a() {}
  a = 10;
  return;

}
b();
console.log(a); // logs a = 1

Wenn wir jedoch die function a(){} definition El value of 'a' außerhalb der Funktion b deklariert und definiert ist, wird dieser Wert überschrieben und ändert sich im Fall 2 in 10. Der Wert wird überschrieben, weil a=10 bezieht sich auf die globale Deklaration, und wenn sie lokal deklariert werden soll, müssen wir schreiben var a = 10; .

var a = 1;
function b() {
  var a = 10; // here var a is declared and defined locally because it uses a var keyword. 
  return;
}
b();
console.log(a); // logs a = 1

Wir können unsere Zweifel weiter klären, indem wir die name property en function a(){} definition unter einem anderen Namen als 'a'

var a = 1;
function b() {
  a = 10; // here var a is declared and defined locally because it uses a var keyword. 
  return;

  function foo() {}
}
b();
console.log(a); // logs a = 1

Answer 3

Heben ist ein Konzept, das für uns gemacht wurde, um es leichter zu verstehen. Was tatsächlich passiert, ist, dass die Deklarationen in Bezug auf ihre Bereiche zuerst durchgeführt werden und die Zuweisungen danach erfolgen (nicht zur gleichen Zeit).

Wenn die Erklärungen erfolgen, var a dann function b und darin b Umfang, function a erklärt wird.

Diese Funktion a schattet die Variable a aus dem globalen Bereich ab.

Nachdem die Deklarationen abgeschlossen sind, beginnt die Wertzuweisung, die globale a erhält den Wert 1 und das a im Inneren function b erhalten 10 . wenn Sie es tun alert(a) aufruft, wird die aktuelle globale Bereichsvariable aufgerufen. Diese kleine Änderung des Codes macht es klarer

        var a = 1;

    function b() {
        a = 10;
        return a;

        function a() { }
    }

    alert(b());
    alert(a);

Answer 4

Hier ist meine Zusammenfassung der Antwort mit weiteren Kommentaren und einer begleitenden Fiddle zum Herumspielen.

// hoisting_example.js

// top of scope ie. global var a = 1
var a = 1;

// new scope due to js' functional (not block) level scope
function b() {
    a = 10; // if the function 'a' didn't exist in this scope, global a = 10
  return; // the return illustrates that function 'a' is hoisted to top
  function a(){}; // 'a' will be hoisted to top as var a = function(){};
}

// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b' 
// and in doing so, created a new named variable 'a' 
// which is a function within b's scope
b();

// a will alert 1, see comment above
alert(a);

https://jsfiddle.net/adjavaherian/fffpxjx7/

Answer 5

scpope & closing & hoisting (var/function)

1. scpope : Auf die globale Variable kann überall zugegriffen werden (der gesamte Datei [ ] Bereich (Funktions-/Blockbereich)!
   Hinweis: Wenn eine lokale Variable, die nicht mit var-Schlüsselwörter in einer Funktion verwendet wird, wird sie zu einer globalen Variablen!
2. Abschluss : eine Funktion im Inneren des anderen f lokaler Bereich (übergeordnete Funktion) & globaler Bereich, jedoch können die Variablen der Funktion können nicht von anderen zugegriffen werden! es sei denn, Sie geben sie als Rückgabewert zurück!
3. hoisting : Verschieben aller deklarierten/entdeklarierten vars/function in den Geltungsbereich top, dann den Wert oder null zuweisen!
   Hinweis: Es wird nur die Deklaration verschoben, nicht der Wert!

var a = 1;                
//"a" is global scope
function b() {  
   var a = function () {}; 
   //"a" is local scope 
   var x = 12; 
   //"x" is local scope 
   a = 10;
   //global variable "a" was overwrited by the local variable "a"  
   console.log("local a =" + a);
   return console.log("local x = " + x);
}       
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x = 
console.log(x);
// ReferenceError: x is not defined