Javascript函数范围和提升

问题描述 投票：81回答：15

我刚读了一篇关于JavaScript Scoping and Hoisting by Ben Cherry的精彩文章，他在其中给出了以下示例：

var a = 1;

function b() {
    a = 10;
    return;

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

使用上面的代码，浏览器将发出“1”警报。

我仍然不确定它为什么会返回“1”。他说的一些事情就像是：所有的功能声明都被提升到顶部。您可以使用函数来调整变量的范围。仍然没有为我点击。

javascript scope scoping hoisting
15个回答
111
投票

功能提升意味着功能被移动到其范围的顶部。那是，

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

将由翻译重写为此

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

很奇怪，是吗？

此外，在这种情况下，

function a() {}

表现得一样

var a = function () {};

所以，从本质上讲，这就是代码所做的事情：

var a = 1;                 //defines "a" in global scope
function b() {  
   var a = function () {}; //defines "a" in local scope 
   a = 10;                 //overwrites local variable "a"
   return;      
}       
b();       
alert(a);                 //alerts global variable "a"
0
投票

这是我对答案的回顾，其中包含更多注释和一个可以随意使用的小提琴。

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

0
投票

提升在JavaScript中意味着，在执行任何代码之前，通过程序执行变量声明。因此，在代码中的任何位置声明变量等同于在开头声明它。

0
投票

这一切都取决于变量'a'的范围。让我通过创建范围作为图像来解释。

这里JavaScript将创建3个范围。

i）全球范围。 ii）函数b（）范围。 iii）函数a（）范围。

enter image description here

当你调用'alert'方法时，它明确属于Global那个时间，所以它将从全局范围中选择变量'a'的值，只有1。

0
投票

长篇大论！

但它会清除空气！

Java Script的工作方式是它涉及两个步骤：

  1. 编译（可以这么说） - 这一步注册变量和函数声明及其各自的范围。它不涉及评估函数表达式：var a = function(){}或变量表达式（如在3的情况下将x分配给var x =3;，这只是对R.H.S部分的评估。）
  2. 口译员：这是执行/评估部分。

检查以下代码的输出以了解：

//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);

function b() {
  //cannot write the below line:
  //console.log(e); 
  //since e is not declared.
  e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
  console.log("e is " + e) //  works!
  console.log("f is " + f);
  var f = 7;
  console.log("Now f is " + f);
  console.log("d is " + d);
  return;

  function d() {}
}
b();
console.log(a);

让我们打破它：

  1. 在编译阶段，'a'将在全球范围内注册，其值为'undefined'。同样适用于'c'，它此时的价值将是'undefined'而不是'function()'。 'b'将在全球范围内注册为一项功能。在b的范围内，'f'将被注册为一个变量，此时将不定义并且函数'd'将被注册。
  2. 当解释器运行时，可以在解释器到达实际表达式行之前访问声明的变量和function()（而不是表达式）。因此，变量将打印'undefined'并且声明的匿名函数可以更早地调用。但是，尝试在表达式初始化之前访问未声明的变量会导致如下错误：

console.log(e)
e = 3;

现在，当您具有相同名称的变量和函数声明时会发生什么。

答案是 - 函数始终在之前被提升，如果声明了相同的名称变量，则将其视为重复并忽略。记住，顺序无所谓。函数始终优先。但是在评估阶段，您可以将变量引用更改为任何内容（它存储最后一次分配的任何内容）请查看以下代码：

var a = 1;
console.log("a is " + a);

function b() {
  console.log("a inside the function b is " + a); //interpreter finds                                'a' as function() in current scope. No need to go outside the scope to find 'a'.
  a = 3; //a changed
  console.log("Now a is " + a);
  return;

  function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.
0
投票

吊装是JavaScript的行为概念。吊装（比如移动）是解释变量应该如何以及在何处被声明的概念。

在JavaScript中，变量可以在使用之后声明，因为函数声明和变量声明总是被JavaScript解释器无形地移动（“提升”）到其包含范围的顶部。

在大多数情况下，我们遇到两种类型的吊装。

1.可变报关吊装

让我们通过这段代码了解这一点。

 a = 5; // Assign 5 to a
 elem = document.getElementById("demo"); // Find an element 
 elem.innerHTML = a;                     // Display a in the element
 var a; // Declare a
  //output-> 5

这里变量a的声明将在编译时由javascript解释器无形地托管到顶部。所以我们能够获得a的价值。但是不推荐这种变量声明方法，因为我们应该像这样将变量声明为top。

 var a = 5; // Assign and declare 5 to a
 elem = document.getElementById("demo"); // Find an element 
 elem.innerHTML = a;                     // Display a in the element
  // output -> 5

考虑另一个例子。

  function foo() {
     console.log(x)
     var x = 1;
 }

实际上解释如下：

  function foo() {
     var x;
     console.log(x)
     x = 1;
  }

在这种情况下，x将是未定义的

如果代码已执行包含变量声明，则无关紧要。考虑这个例子。

  function foo() {
     if (false) {
         var a = 1;
     }
     return;
     var b = 1;
  }

这个功能就是这样的。

  function foo() {
      var a, b;
      if (false) {
        a = 1;
     }
     return;
     b = 1;
  }

在变量声明中仅变量定义提升，而不是赋值。

  1. 功能声明吊装

与变量提升不同，功能体或指定值也将被提升。考虑这段代码

 function demo() {
     foo(); // this will give error because it is variable hoisting
     bar(); // "this will run!" as it is function hoisting
     var foo = function () {
         alert("this would not run!!");
     }
     function bar() { 
         alert("this will run!!");
     }
 }
 demo();

现在我们理解变量和函数提升，现在让我们理解这个代码。

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

这段代码将会是这样的。

var a = 1;                 //defines "a" in global scope
 function b() {  
   var a = function () {}; //defines "a" in local scope 
    a = 10;                 //overwrites local variable "a"
    return;      
 }       
 b();       
 alert(a);

函数a（）将在b（）中具有局部范围。 a（）将被移动到顶部，同时用它的定义解释代码（仅在函数提升的情况下），因此现在将具有局部范围，因此不会影响在函数b（）内具有其自己的范围的while的全局范围。

0
投票

令人惊讶的是，这里的答案都没有提到范围链中执行上下文的相关性。

JavaScript引擎将当前正在执行的代码包装在执行上下文中。基本执行上下文是全局执行上下文。每次调用新函数时，都会创建一个新的执行上下文并将其放在执行堆栈上。想象一下堆栈框架坐在其他编程语言的调用堆栈上。后进先出。现在每个执行上下文在JavaScript中都有自己的变量环境和外部环境。

我将使用以下示例作为演示。

1）首先，我们进入全局执行上下文的创建阶段。创建了词汇环境的外部环境和可变环境。全局对象被设置并放置在内存中，特殊变量'this'指向它。函数a及其代码和具有未定义值的变量myVar将放置在全局变量环境的内存中。重要的是要注意函数a的代码不会被执行。它只是放在具有功能a的内存中。

2）其次，它是执行上下文的执行阶段。 myVar不再是未定义的值。它初始化为值1，存储在全局变量环境中。调用函数a并创建新的执行上下文。

3）在函数a的执行上下文中，它经历了自己的执行上下文的创建和执行阶段。它有自己的外部环境和可变环境，因此，它有自己的词汇环境。函数b和变量myVar存储在其变量环境中。此变量环境与全局变量环境不同。由于函数a在词法上（物理上在代码中）与全局执行上下文处于同一级别，因此其外部环境是全局执行上下文。因此，如果函数a引用不在其变量环境中的变量，它将搜索范围链并尝试在全局执行上下文的变量环境中查找变量。

4）在函数a中调用函数b。创建新的执行上下文。由于它在词汇中位于函数a中，因此它的外部环境是一个。所以当它引用myVar时，由于myVar不在函数b的变量环境中，它将在函数a的变量环境中查找。它找到它并且console.log打印2.但是如果变量不在函数a的变量环境中，那么由于函数a的外部环境是全局执行上下文，因此范围链将继续在那里搜索。

5）在函数b和a完成执行后，它们将从执行堆栈中弹出。单线程JavaScript引擎在全局执行上下文中继续执行。它调用b函数。但是在全局变量环境中没有b函数，并且没有其他外部环境可以在全局执行上下文中进行搜索。因此，JavaScript引擎会引发异常。

function a(){
  function b(){
    console.log(myVar);
  }

  var myVar = 2;
  b();
}

var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined

以下示例显示了操作范围链。在函数b的执行上下文的变量环境中，没有myVar。因此它搜索其外部环境，即功能a。函数a在其变量环境中也没有myVar。因此，引擎搜索功能的外部环境，这是全局执行上下文的外部环境，myVar在那里定义。因此，console.log打印1。

function a(){
  function b(){
    console.log(myVar);
  }

  b();
}

var myVar = 1;
a();
> 1

关于执行上下文和与之相关的词法环境，包括外部环境和变量环境，在J​​avaScript中启用变量的范围。即使您多次调用相同的函数，对于每次调用，它也会创建自己的执行上下文。因此每个执行上下文在其变量环境中都有自己的变量副本。没有共享变量。

0
投票

根据我的知识，提升发生在变量声明和函数声明中，例如：

a = 7;
var a;
console.log(a)

JavaScript的引擎内部会发生什么：

var a;
a = 7;
console.log(a);
// 7

要么：

console.log(square(7)); // Output: 49
function square(n) { return n * n; }

它将成为：

function square(n) { return n * n; }
console.log(square(7)); // 49

但是不会提升诸如变量分配，函数表达式赋值之类的赋值：例如：

console.log(x);
var x = 7; // undefined

它可能会变成这样：

var x;
console.log(x); // undefined
x = 7;
6
投票

你必须要记住的是它解析整个函数并在执行之前解析所有变量声明。所以....

function a() {}

真的变成了

var a = function () {}

var a将其强制转换为局部范围，并且变量范围是通过整个函数，因此全局变量仍为1，因为您已通过将其作为函数声明为本地范围。

5
投票

a函数在函数b中被提升：

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

这几乎就像使用var：

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

该函数在本地声明，设置a只发生在本地范围内，而不是全局变量。

3
投票
  1. 函数声明function a(){}首先被提升，它的行为类似于var a = function () {};，因此在本地范围内创建了a。
  2. 如果您有两个具有相同名称的变量（一个在本地另一个全局），则局部变量始终优先于全局变量。
  3. 设置a=10时，设置局部变量a，而不是全局变量。

因此，全局变量的值保持不变，你得到，警告1

1
投票

function a() { }是一个函数语句，它创建a函数本地的b变量。 无论var或函数语句是否被执行，解析函数时都会创建变量。

a = 10设置此局部变量。

1
投票

范围和关闭和提升（变量/功能）

  1. scpope：全局var可以在任何地方访问（整个文件范围），本地var只能通过本地范围（函数/块范围）访问！ 注意：如果一个局部变量在函数中没有使用var关键字，它将成为一个全局变量！
  2. closure：一个函数在另一个函数内部，可以访问本地作用域（父函数）和全局作用域，但是其他函数不能访问它们的变量！除非，你将它作为返回值返回！
  3. hoisting：将所有declare / undeclare vars / function移动到scope top，而不是赋值或null！ 注意：它只是移动声明，而不是移动值！

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
1
投票

在这段小代码中，争论的焦点是什么？

情况1：

在function a(){}体内包含function b定义如下。 logs value of a = 1

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

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

案例2

排除function a(){}体内的function b定义如下。 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

观察将帮助您意识到语句console.log(a)记录以下值。

案例1：a = 1

案例2：a = 10

假定

  1. var a已在全球范围内定义并在词汇上声明。
  2. a=10这个语句将值重新分配给10，它在词法中位于函数b中。

两种情况的解释

由于function definition with name property a与variable a相同。 variable a内的function body b成为局部变量。前一行表示a的全局值保持不变，a的本地值更新为10。

所以，我们打算说的是下面的代码

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

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

它由JS解释器解释如下。

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


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

但是，当我们删除function a(){} definition时，value of 'a'在函数b之外声明并定义，该值被覆盖并且在情况2中变为10.该值被覆盖，因为a=10引用全局声明并且它是否在本地声明我们必须写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

我们可以通过将name property中的function a(){} definition更改为除'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
1
投票

吊装是一个让我们更容易理解的概念。实际发生的是声明首先在其范围内完成，并且在此之后将发生分配（而不是在同一时间）。

当声明发生时，var a，然后function b和b范围内，function a被宣布。

此函数a将遮蔽来自全局范围的变量a。

声明完成后，值assign将开始，全局a将获得值1，而function b内部将获得10。当你做alert(a)时，它会调用实际的全局范围变量。对代码的这一小改动将使其更加清晰

        var a = 1;

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

        function a() { }
    }

    alert(b());
    alert(a);
0
投票

它发生的原因是变量名称与函数名称相同意味着“a”。因此，由于Javascript提升它尝试解决命名冲突，它将返回a = 1。

直到我读到关于“JavaScript吊装”http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html的这篇文章，我才对此感到困惑

希望能帮助到你。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.