Question

我不明白为什么该函数的console.log返回值和typeof正确，但是其返回值不能在另一个函数中使用

我正在尝试使用气泡事件来收集单击按钮的值。

mailx

这是JS：

<DIV class = "keys">
        <button class = "key" id = "rock" value = "rock">Rock</button>
        <button class = "key" id = "paper" value = "paper">Paper</button>
        <button class = "key" id = "scissors" value = "scissors">Scissors</button>
</DIV>

Answer 1

如注释中所述，从事件处理程序返回值不会对该值执行任何操作。该值用于确定进一步的事件处理。

如果需要该值，则必须将其存储在处理程序中的某个位置。
此代码将值保存在全局变量chosenValue中，并且还将值设置为<span>中的文本-您实际存储值的方式取决于您计划如何使用该值以后。

let chosenValue;
const bubbleBar = document.querySelector(".keys");
bubbleBar.addEventListener("click", playerPlay);
bubbleBar.addEventListener("click", display);

function playerPlay(e) {
  e.preventDefault();
  let playerChoice = ""
  console.log(e.target.value); //debugs correctly
  playerChoice = e.target.value;
  console.log(playerChoice, typeof playerChoice); //debugs correctly
  document.getElementById('playerChoice').innerText = playerChoice;
  chosenValue = playerChoice;
  console.log(`chosenValue variable value is now ${chosenValue}`);
}

function display(e) {
  e.preventDefault();
  console.log(e.target.value);
}

<div class="keys">
  <button class="key" id="rock" value="rock">Rock</button>
  <button class="key" id="paper" value="paper">Paper</button>
  <button class="key" id="scissors" value="scissors">Scissors</button>
</div>
<div>
  Player's Choice: <span id="playerChoice">none</span>
</div>

Answer 2

关于范围和返回语句的说明

嵌套作用域通常会造成混淆，而且返回的位置并不总是很清楚。以下是一些可供参考的示例：

function simple(){ return 'foo' }

当"foo"的调用方式为simple时返回simple() （或simple("args", "aren't", "used", "but still are passed")或simple.call()）

function nested(){
  return function inner(){
    return 'foo'
  }
}

nested在被调用时会返回一个函数，但是该函数不会立即运行。因此，要获取"foo"，您需要像这样调用它：

let outerResult = nested() // creates and returns a function
outerResult() // returns "foo"

//or more concisely
nested()() // calls both functions in order.

在这里，我们看到return总是会返回到“最接近”的函数，即最里面的函数。 return不能退出其所使用的功能。

function loop(){
  let values = [1,2,3]

  for (let value of values){
    return value
  }
}

返回1，并且循环不再运行。因此，在这种情况下，该代码块不会更改返回范围。

function callbackLoop(){
  let values = [1,2,3]

  values.forEach(value => { return value })
}

此代码存在错误。您可能希望该代码与常规循环相同，但实际上并不能。函数value => { return value }中的返回无法导致callbackLoop函数返回。它只能返回自己，与nested示例相同。有时采用回调的函数会传递回调返回值，但如果不想，则不必这样做。由于forEach是为副作用而设计的（没有返回值的函数），所以它不会这样做，而addEventListener也不会这样做，因为它也是为副作用而设计的。

Array.prototype.map是采用“纯函数”回调而不是副作用的函数示例：

const result = [1, 4, 9, 16].map(x => {return x * 2});
// `map` returns: [2, 8, 18, 32] 
// (it gets the return value of the callback function for 
// each item in the array, and uses that)

“纯函数”是在这种情况下仅对输入（x）起作用的函数，不对任何变量进行更改。乘法“创建”一个新值，这就是返回的值。原始x未“突变”（保留不变）。为了使纯函数有用，它们需要返回一个值，并且需要以某种方式使用该值。

为什么console.log正确返回但我的函数返回未定义？

2 个答案:

关于范围和返回语句的说明