ES5中的块范围

Question

我的作业有问题。 这是作业：

给定以下功能。

let rechne = function(x,y,operation) {
  let ergebnis = x - y;
  if (!operation) {
    let ergebnis = x + y;
    console.log(ergebnis);
  }
  return ergebnis;
}

重写该函数，以便可以在ES5中实现所需的变量块范围。

所以我这样写：

 let rechneScope = function(x,y,operation) {
   (function(){
     let ergebnis = x - y;
   })()

   if (!operation) {
     (function(){
       let ergebnis = x + y;
       console.log(ergebnis);
     })()
   }

   return ergebnis;
}

假设我在console.log之类的console.log(rechneScope(10, 2))调用了该函数，我希望第一个变量为8，第二个变量为12。

但是，当我重新加载浏览器时，控制台始终为第二个变量打印12，而对于第一个变量，结果却有所不同。 有时2，有时8，有时15。我真的很困惑。 为什么会这样呢？

Answer 1

首先，您假设期望的输出是8然后输出12是错误的。 第一个执行的console.log是ergebnis = x + y console.log ，因此您应该看到12然后是8 。

接下来，在ES6中引入let ，所以如果您将自己限制在ES5中，则只能使用var 。

最后，请确保将每个变量的整个范围包装在IIFE中。 您在第一个函数之外return ergebnis ，因此在执行该行代码时，该变量将不再在范围内。

正确的实现应如下所示：

 var rechneScope = function(x, y, operation) { return (function() { var ergebnis = x - y; if (!operation) { (function() { var ergebnis = x + y; console.log(ergebnis); })() } return ergebnis; })() } console.log(rechneScope(10, 2)) 

我知道这不是您分配的内容，但仅供参考， Babel不会尝试模拟ES6范围。 这是Babel编译相同内容的方法：

"use strict";

var rechne = function rechne(x, y, operation) {
  var ergebnis = x - y;

  if (!operation) {
    var _ergebnis = x + y;

    console.log(_ergebnis);
  }

  return ergebnis;
};

Answer 2

您正在犯一些小错误。

1. 您使用的是let关键字，它关心范围，因此，作为回报，您的“ ergebnis”未定义。
2. 您不在第一个块中打印输出。

解决方案是删除return语句并在每个块中打印答案。 您会得到理想的结果

let rechneScope = function(x,y,operation) {
   (function(){
     let ergebnis = x - y; 
     console.log(ergebnis);
   })()

   if (!operation) {
     (function(){
       let ergebnis = x + y;
       console.log(ergebnis);
     })()
   }
}
rechneScope(10, 2);