JS:默认函数参数值和范围 [英] JS: Default function parameter values and scope

问题描述

我对范围&为该函数分配默认参数值时，该函数内的变量分配似乎会发生变化.

I'm a bit confused about how scope & variable assignment within a function seems to change when assigning a default parameter value for that function.

例如，当此函数的默认值分配给参数 i 时，当使用Chrome Dev Console检查时， output 数组变量似乎是块作用域的:

For example, when this function has a default value assigned to parameter i, the output array variable appears to be block-scoped when inspected with Chrome Dev Console,:

function steps(n, i = 40) {
 var output = [n];
}

steps(10, 20);

但是，通过删除 i 的默认参数值，输出数组变量将在本地作用域:

However, by removing the default parameter value for i, the output array variable is scoped locally:

function steps(n, i) {
  var output = [n];
}

steps(10, 20);

为什么为参数 i 分配默认值会影响 output 数组变量的范围?

Why does assigning a default value to parameter i affect the scope of the output array variable?

最初，我试图通过pythontutor.com的Java实时编程环境运行以下代码段，从而意识到了函数范围的这种转变.即使代码可以在IDE中按预期执行，但由于pythontutor上的范围问题，它仍无法运行:

I was initially made aware of this shift in function scope by attempting to run the following segment of code through pythontutor.com's live programming environment for Javascript. Even though the code executes as expected within an IDE, it fails to run due to scope issues on pythontutor:

function steps(n, i = 1) {
  // declare base case
  if (n === 0) 
    return;

  var output = [];
  print(i, "#");
  print(n - 1, " ");
  console.log(output.join(""));

  // make recursive call
  steps(n - 1, i + 1);

  function print(num, char) {
    for (let j = 0; j < num; j++) {
      output.push(`${char}`);
    }
  }
}


steps(3);  

在声明 output 变量之后，调用 print()时，pythontutor处理器将暂停执行三个步骤.但是，如果我先全局全局声明 output 变量，Pythontutor.com将按预期执行代码:

The pythontutor processor halts execution three steps in, at the invocation of print() just after declaring the output variable. Pythontutor.com will, however, execute the code as expected if I declare the output variable globally first:

var output = [];

function steps(n, i = 1) {
  // declare base case
  if (n === 0) 
    return;

  output = [];
  print(i, "#");
  print(n - 1, " ");
  console.log(output.join(""));

  // make recursive call
  steps(n - 1, i + 1);

  function print(num, char) {
    for (let j = 0; j < num; j++) {
      output.push(`${char}`);
    }
  }
}


steps(3);

推荐答案

这是因为默认初始化程序在其自己的范围内运行.仅当不存在时，主体代码才在顶级功能范围内进行评估.仅当您将函数表达式放在默认的初始化器中时，它才会有所不同，默认的初始化器可能会覆盖其他参数，但无法访问将在主体中声明的变量.

It's because default initialisers run in their own scope. Only if there are none, the body code is evaluated in the top function scope. It would only make a difference if you put a function expression in a default initaliser, which may close over the other parameters but does not have access to the variables that will be declared in the body.

基本上是两者之间的区别

Basically it's the difference between

function steps() {
  var n = arguments[0],
      i = arguments[1];
  var output = [n];
}

和

function steps() {
  var n = arguments[0],
      i = arguments.length > 0 ? arguments[1] : 40;
  (() => {
    var output = [n];
  }());
}

这篇关于JS:默认函数参数值和范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！