ES5 中的块作用域

Question

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

Given following function.

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

Rewrite the function so that the desired block scope of the variables can be achieved in 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 的那个，所以您应该看到 12，然后是 8。

接下来，let 是在 ES6 中引入的，因此如果您将自己限制在 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

你犯了一些小错误。

您正在使用 let 关键字，它关心作用域和因为你的 'ergebnis' 在 return.
您没有打印第一个块中的输出。

解决方案是删除 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);

ES5 中的块作用域

Block scope in ES5

javascript

scope

ecmascript-5

iife