Question

我一直在玩 Eloquent Javascript 的第3章参数和范围，我理解console.log和return之间的区别但是我不明白为什么开发人员工具控制台给我两个不同的结果：inside f1和"inside f1"

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  console.log(x);
};
f1(); // inside f1

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  return x;
};
f1(); // "inside f1"

Answer 1

console.log和return完全不同。

console.log获取一个值并在控制台上显示它。 return停止正在运行的函数，并（可选）将值发送回调用上下文。 console.log不会退出该功能。

让我们探讨两种选择。

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  console.log(x);
};
f1(); // inside f1

此处，console.log只是将x的值输出到控制台。这不涉及格式化，也没有其他修改。函数f1根本不返回任何内容（函数末尾有一个隐式return;）。

现在让我们看看另一段代码：

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  return x;
};
f1(); // "inside f1"

此处，函数f1具有返回值，因为您使用了return语句。因此f1会返回字符串inside f1。 因为您从控制台调用f1 ，控制台会将该函数的返回值输出到控制台。如果其他代码名为f1（例如，您的应用程序中的其他位置），则控制台上将没有输出。

它在""引号中的原因是，控制台由于只有开发人员知道的原因，选择以这种方式显示字符串值。

Answer 2

在第一个片段中，您打印了＃34;在f1＆＃34;当你调用console.log（x）时。在第二个中，你只是返回x值。

为了帮助您了解正在发生的事情，只需将下面的行放在第二个代码段的末尾：

console.log(f1());

Answer 3

你没有比较两个片段中的相同内容。

检查屏幕截图。

在第一次调用（f1()）中，您会看到对log的调用的输出，然后是函数的返回值，由于您什么也没有返回，因此该函数未定义。

在secon调用（f2()）中，您只能看到函数的返回值，它返回一个字符串。

Answer 4

在这个片段中，x具有内部函数的范围，因此值为“inside f1”

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  console.log(x);
};
f1();

此代码段中的内容

var x = "outside";
var f1 = function() {
  var x = "inside f1";
 return x;
};
console.log(x);

x已失去内部范围，因为它具有全局x的范围，因此原因值在外面

如果你仍然希望得到内部函数x的值，那么你需要做的就是返回x所有你需要做的是var result = f1（）;现在结果将在f1里面

var x = "outside";
var f1 = function() {
  var x = "inside f1";
  return x;
};
var result=f1();

console.log(result);